我试图创建一个导航栏,它应该适合一个名为 #page_wrap
的 div id
当我尝试使用 firebug 时,它的宽度是 980px 我看到 #nav
选择大于 #page_wrap
。为什么会这样。
我的意图是导航栏不应该超出 #page_wrap
这是代码
HTML
<div id="page_wrap">
<ul id="nav">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
<li><a href="#">Menu7</a></li>
<li><a href="#">Menu8</a></li>
<li><a href="#">Menu9</a></li>
</ul> <!-- END Navigation Bar-->
<div id="content">
</div>
</div> <!-- END page_wrap -->
CSS
ul#nav {
list-style: none;
width:980px;
height:35px;
background:#000000;
}
ul#nav li a {
float:left;
color:white;
text-decoration: none;
width:105px;
line-height: 35px;
border-right: 2px solid #979797;
text-align: center;
}
ul#nav li a:hover {
background: #979797;
}
#page_wrap {
margin:0 auto;
width:980px;
}
查看图像,它在开始和结束处都有空格。为什么开始和结束处有空格。如何避免这些事情。我相信这是导致比其父级更大的问题的原因。
如何删除开始和结束空空格以及如何将 #nav
准确地放置在 #page_wrap 中,这意味着它不应该从 #page_wrap
中出来。有什么帮助吗?
最佳答案
删除 UL 的默认填充。
ul#nav{padding:0;}
关于html - 导航栏宽度高于其父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19247902/