为什么不是div内的文字？

我刚开始玩弄HTML/CSS，而且我已经卡住了。为什么不是div内的文字？

我试图谷歌我的问题，但我想我错过了一些关键字来找到解决方案。为什么不是<div id="NavContent>里面的链接和文本？

body { 
 
    margin:0; 
 
    background-color: #ffffff; 
 
} 
 

 
nav { 
 
    background-color: #2a9dfc; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 13px; 
 
    padding-bottom: 13px; 
 
} 
 

 
#NavContent { 
 
    border: 2px solid black; 
 
    max-width: 900px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
#Link { 
 
    float:left; 
 
} 
 

 
#Text { 
 
    float:right; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>scrare</title> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
     <div id="NavContent"> 
 
      <a id="Link" href="/">Link</a> 
 
      <div id="Text">Text</div> 
 
     </div> 
 
    </nav> 
 
</body> 
 
</html>

来源

2015-07-12 Andreas V

简单的解决方法是增加overflow: hidden;到#NavContent。

或者你可以添加clearfix解决方案 -

#NavContent:after { 
    content: ""; 
    display: block; 
    clear: both; 
}

body { 
 
margin:0; 
 
background-color: #ffffff; 
 
} 
 

 
nav { 
 
background-color: #2a9dfc; 
 
padding-left: 20px; 
 
padding-right: 20px; 
 
padding-top: 13px; 
 
padding-bottom: 13px; 
 
} 
 

 
#NavContent { 
 
border: 2px solid black; 
 
max-width: 900px; 
 
width: 100%; 
 
margin: 0 auto; 
 
} 
 

 
#Link { 
 
float:left; 
 
} 
 

 
#Text { 
 
float:right; 
 
} 
 
#NavContent:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
}

<nav> 
 
\t <div id="NavContent"> 
 
\t \t <a id="Link" href="/">Link 
 
\t \t </a> 
 
\t \t <div id="Text"> 
 
\t \t \t \t \t Text 
 
\t \t </div> 
 
\t </div> 
 
</nav> 
 

 
<main> 
 
</main> 
 

 
<footer> 
 
</footer>

来源

2015-07-12 19:22:18