导航栏贴在上面

Question

我使用来自Here的代码来使用导航栏粘在顶部。这样可以正常工作，但是当我添加实际的导航div时，导航栏设置为距离顶部大约20个像素，并在滚动时跳回到顶部。

我在导航下添加了这个：

<div id="navbar">
<ul id="navlist">
<li><a href="#">About</a></li>
<li><a href="#">Prints</a></li> 
<li><a href="#">Services</a></li>   
<li><a href="#">Contact</a></li>
</ul>
</div>

任何想法为什么一旦我在导航栏中添加一个列表或div它就会混乱？ http://jsfiddle.net/x4GQ5/3/

Answer 1

您需要在overflow: hidden;上加载ul#nav，因为它已经浮动了后代（其高度因此而崩溃），您需要删除<ul>上的默认边距。您还应该考虑包含CSS reset，以便您可以避免使用默认的浏览器样式规则。

jsFiddle

Answer 2

您需要为ul＃nav设置margin: 0。

ul#nav  {
  list-style: none;
  line-height: 2em;
  margin: 0;    
}