使用 float:left 样式化 li 标签是创建水平导航栏的标准方法。但每当我这样做时，整个导航栏列表就会与包含的 div 分开。
删除 float:left 会解决问题，但假设我想这样做。
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
<h2>Demo: Navigation Bar</h2>
<ul id="navbar">
<li>
<a href="#">News</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#header {
margin: 10px;
width: 8in;
background-color: green;
margin-left: auto; /* setting margin to auto centers block element */
margin-right: auto; /* width must not be 100% */
}
#header ul { /* ul */
list-style-type: none;
padding: 0;
margin-top: 0px;
}
#header li {
display:block;
float:left;
background-color: silver;
margin: 0;
}
非常感谢任何见解!
编辑: 解决方案是在列表后添加空的 div，或者将包含的 div 设置为 overflow:hidden。
在寻找为什么会发生这种情况的解释之后，我找到了一个解释一切的好链接!
最佳答案
诀窍是，使用 float - 使用 clearfixes。在您的情况下，在 header 结束标记前添加以下内容 </div> :
<div style="clear: both"></div>
考虑到其中的 float 元素，这将使标题拉伸(stretch)。
关于css - float :left for <li> creates spacing above navigation bar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6148460/