Question

我的div中有一些问题。页面从上到下从左到右设置为全屏，一切都很好，直到我开始将一些内容添加到div“top_nav”中，这似乎将整个“header_wrapper”向下推。我的CSS会告诉你所发生的一切。

<div id="wrapper">
    <!-- header Section -->
    <div id="header_wrapper">
        <div id="header_content">
            <div id="top_nav">
                <ul>
                    <li class="cg">Login/Register</li>
                    <li class="cg">Shopping</li>
                    <li>
                        <form action="http://www.example.com/login/">
                            <input name="search" placeholder="Enter keyword" type="search"><input type="submit" value="Search">
                        </form>
                    </li>
                </ul>
            </div>
            <div id="logo"></div>
            <div id="bottom_nav">
                <ul>
                    <li class="cg">
                        <a href="news.html">News</a>
                    </li>
                    <li class="cg">
                        <a href="videos.html">Videos</a>
                    </li>
                    <li class="cg">
                        <a href="photography.html">Photography</a>
                    </li>
                    <li class="cg">
                        <a href="magazine.html">Our Magazine</a>
                    </li>
                    <li class="cg">
                        <a href="environment.html">Environment</a>
                    </li>
                    <li class="cg">
                        <a href="travel.html">Travel</a>
                    </li>
                    <li class="cg">
                        <a href="kids.html">Kids</a>
                    </li>
                    <li class="cg">
                        <a href="television.html">Television</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

#html,body {
    margin: 0;
    padding: 0;
}

#wrapper {
    margin: 0 auto;
    padding: 0;
    background-color: #DDDAD4;
}

#header_wrapper {
    width: 100%;
    height: 110px;
    background-color: #383838;
    overflow: hidden;
}

#header_content {
    width: 1000px;
    height: 110px;
    background-color: #ffc0cb;
    margin: auto;
}

#top_nav {
    width: 1000px;
    height: 30px;
    background-color: green;
}

#top_nav li {
    display: inline;
    color: #fff;
}

#logo {
    width: 80px;
    height: 80px;
    background-color: #000;
    float: left;
}

#bottom_nav {
    width: 920px;
    height: 80px;
    background-color: red;
    float: right;
}

#bottom_nav li {
    display: inline;
}

#bottom_nav a {
    color: #fff;
}

Answer 1

看起来是因为<ul>中的边距。这是一个JSFiddle，我删除了边距：https://jsfiddle.net/jameson5555/wrzLcz3L/

ul {
    margin: 0;
}

nav div不会全屏显示

1 个答案: