Html 导航条宽度高于其父div

我试图创建一个导航栏，它应该放在一个名为

#page_wrap

当我尝试使用firebug时，itd宽度是980px，我看到

#nav

选择大于

#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 -->

请参见图像，它的开始和结束处都有空格。为什么开头和结尾都有空格。如何避免这些事情。我相信这是造成一个比它的父母更大的问题的原因

如何删除起始和结束emtpy空格，以及如何将

#nav

放置在#page_wrap内部，这意味着它不应该从

#page_wrap

中移出。有什么帮助吗

---

删除UL的默认填充

ul#nav{padding:0;}

像这样

css

  *{
    margin:0;
    padding:0;
}
ul#nav {
    list-style: none;
    width:980px;
    height:35px;
    background:#000000;
    margin:0 auto;
    padding:0;

}
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;
}

---

在css开始时使用此选项

* {
padding: 0;
}

---

您只是没有消除浏览器样式表中的默认填充应该可以解决这个问题。哦，我明白了。浏览器具有

ul

标记的默认填充值…感谢您提供的信息右侧的间距继承自ULU的宽度您可以编辑您的答案。无需注释。因此，为Menu9提供单独的id并使用该id将边框设置为“无”将有所帮助。对吧?@戴尔：谢谢你的信息@Dale@sun您可以使用：last-child伪类作为Menu9的目标，并将其边框设置为none。

* {
padding: 0;
}