Question

我一如既往地开始编写代码，我在header和section之间得到了这个奇怪的垂直间隔符，如下所示。这是非常无聊的事情，但无法处理它。

CSS

.container {
    background:#000;
}
.pos-center {
    background:#000;
    width:1080px;
    margin: 0 auto;
}
.slider {
    background:url(slider.jpg) no-repeat;
    height:338px;
    width:1080px;
    border-bottom:#ff5300 3px solid;    
}

.nav {
    background:#F00 ;
    height:40px;

}
.nav li {
    display:inline-block;
    list-style:none;
}

HTML

<body>
    <header>
        <div class="container">
            <div class="pos-center">
                <div class="slider">
                </div>
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="pos-center">
                <div class="nav">
                    <ul>
                       <li><a href="#">Zadaj Pytanie</a></li>
                       <li><a href="#">Komentarze</a></li>
                       <li><a href="#">Dodaj do Ulubionych</a></li>
                       <li><a href="#">Nasze Aukcje</a></li>
                       <li><a href="#">O Nas</a></li>                
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>

Answer 1

这是因为ul内的.nav有一个margin-top。

将其设置为margin-top: 0，你应该没问题。

.container {
    background:#000;
}
.pos-center {
    background:#000;
    width:1080px;
    margin: 0 auto;
}
.slider {
    background:url(slider.jpg) no-repeat;
    height:338px;
    width:1080px;
    border-bottom:#ff5300 3px solid;    
}

.nav {
    background:#F00 ;
    height:40px;

}
.nav ul {
  margin-top: 0; //Here
}
.nav li {
    display:inline-block;
    list-style:none;
}

<body>
    <header>
        <div class="container">
            <div class="pos-center">
                <div class="slider">
                </div>
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="pos-center">
                <div class="nav">
                    <ul>
                       <li><a href="#">Zadaj Pytanie</a></li>
                       <li><a href="#">Komentarze</a></li>
                       <li><a href="#">Dodaj do Ulubionych</a></li>
                       <li><a href="#">Nasze Aukcje</a></li>
                       <li><a href="#">O Nas</a></li>                
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

奇怪的垂直白色间隔

1 个答案: