0

我试图创建一个导航栏，它应该适合一个名为 itd 的 div id #page_wrap ，当我尝试使用 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;
}

为什么开头和结尾都有空格 查看它在开始和结束处有空格的图像。为什么开头和结尾都有空格。如何避免那些事情。我相信这是导致比其父级更大的问题的原因。

如何删除开始和结束 emtpy Spaces 以及如何准确地放置#nav在 #page_wrap 内，这意味着它不应该从#page_wrap. 有什么帮助吗？

检查这个 JSFIDDLE

4

3 回答 3

0

删除 UL 的默认填充。

ul#nav{padding:0;}
于 2013-10-08T12:43:42.373 回答
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;
}
于 2013-10-08T12:46:06.930 回答
0

在你的 CSS 开始时使用它

* {
padding: 0;
}
于 2013-10-08T12:46:24.393 回答