Question

我知道这已经做了很多，我在这里搜索了一堆问题，但找不到我的问题的解决方案。我知道这很简单。基本上我有一个包装器，标题，导航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;
}

非常感谢任何帮助。

Answer 1

ul标记上有一个边距。立即解决方法是将ul { margin: 0; padding: 0 }添加到您的CSS中。

您可以使用Chrome或IE等开发工具轻松检查此类内容（使用，点击F12）。

Answer 2

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

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/

div之间不需要的间距

2 个答案: