0

我知道这已经做了很多，我确实在这里搜索了一堆问题，但找不到我的问题的解决方案。我知道这很简单。基本上我有一个包装器、标题、导航 div。我希望标题和导航是齐平的，但现在它们之间有空间（尽管它们都没有边距）。我制作了一个 JSFiddle，它可能比我的代码更简单（http://jsfiddle.net/aqEzC/）

这是我的 html/css 的一部分：

<div id="wrapper">
        <div id="header"></div><div id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Directory</a></li>
                <li><a href="#">Submit a Profile</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>

CSS：

div#header {
    width: 960px;
    height: 75px;
    background-image: url('../img/banner.jpg');
    margin: 0;
    padding: 0;
}


div#nav {
    background-image: url('../img/nav_bg.jpg');
    background-repeat: repeat-x;
    background-position: 25px;
    height: 40px;
    background-color: #003A70;
    -moz-box-shadow: 0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    margin: 0;
    padding: 0;
}

任何帮助将非常感激。

4

2 回答 2

1

The ul tag has a margin on it. An immediate fix is to add ul { margin: 0; padding: 0 } to your css.

You can easily check such things by using development tools such as Chrome's or IE's (to use, hit F12).

于 2013-08-27T21:53:39.463 回答
0

我不认为你的标记对此非常好，但你的问题只是需要为那个元素设置溢出，除非你真的想要，否则你不应该在元素上设置高度，特别是当你自己有高度的子元素时.

div#nav {
background-color: green;
background-color: #003A70;
-moz-box-shadow: 0 0 8px #666;
-webkit-box-shadow: 0 0 8px #666;
margin: 0;
padding: 0;
overflow: auto;}

解决方案：http: //jsfiddle.net/aqEzC/3/

于 2013-08-27T21:58:22.220 回答