html - 如何让我的 UL 在其下方进行下一次潜水而不是留下巨大的空间

Question

在此代码笔中:http://codepen.io/audn/pen/oBzOPK

你可以看到 UL 之间有这个奇怪的间距，谁能告诉我为什么？我想在它旁边放一些东西，但是当它离开这个奇怪的间距时会变得很困难。

HTML:

<nav class="bg-white">
    <ul class="nav-top wrapper">
        <li class="nav-top">
            <a href="/" title="HOME" class="nav-top">
                <i class="fa fa-home fa-lg" aria-hidden="true"></i><br><span class="meny-text">Home</span>
            </a>
        </li>

        <li class="nav-top">
            <a href="/pc.php" title="PC PRICE LIST" class="nav-top">
                <i class="fa fa-desktop fa-lg" aria-hidden="true"></i><br><span class="meny-text">PC list</span>
            </a>
        </li>

        <li class="nav-top">
            <a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top">
                <i class="fa fa-gamepad fa-lg" aria-hidden="true"></i><br><span class="meny-text">PS4 list</span>
            </a>
        </li>

        <li class="nav-top">
            <a href="/certified.php" title="CERTIFIED LIST" class="nav-top">
                <i class="fa fa-certificate" aria-hidden="true"></i><br><span class="meny-text">Certified list</span>
            </a>
        </li>

        <li class="nav-top">
            <a href="/faq.php" title="FAQ" class="nav-top">
                <i class="fa fa-question" aria-hidden="true"></i><br><span class="meny-text">FAQ</span>
            </a>

        <li class="nav-top">
            <a href="#" class="nav-top" data-toggle="modal" data-target="#modal-staff">
                <i class="fa fa-envelope-o" aria-hidden="true"></i><br><span class="meny-text">Staff</span>
            </a>
        </li>
        <li class="nav-top">
            <a href="/donate.php" title="DONATE" class="nav-top">
                <i class="fa fa-paypal" aria-hidden="true"></i><br><span class="meny-text">Donate</span>
            </a>
        </li>
    </ul>
</nav>
<div class="what" style="background-color: black; width: 100%; color: white; padding: 32px;">heh</div>

CSS:

body {
    margin:0;
}
.nav-top {
    background:red;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
li a.nav-top {
    color:#34495e;
    text-decoration:none;
    padding:15px;
}
li a.nav-top:hover {
    background-color:#f1f2f3;
    color:#1798e5;
}
li.nav-top {
    text-decoration:none;
    float:left;
}
@media(max-width:700px) {
    .nav-top {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        width:100%;
        line-height:10px;
    }
    a.nav-top {
        padding:5px;
    }
}
@media(min-width:700px) {
    .meny-text {
        margin-left:10px;
    }
}
.header {
    margin-bottom:20px;
}
.bg-white {
    background:white;
}
.modal-backdrop.fade.in {
    display:none !important;
}
.item-prices {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
}
.item-prices > div {
    margin:5px;
}
li a.nav-top {
    color:#34495e;
    text-decoration:none;
    padding:15px;
}
li a.nav-top:hover {
    background-color:#red;
    color:#1798e5;
}
li.nav-top {
    text-decoration:none;
    float:left;
}
@media(max-width:700px) {
    .nav-top {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        width:100%;
        line-height:10px;
    }
    a.nav-top {
        padding:5px;
    }
}

Answer 1

如果您使用的是 chrome，则 UL 元素的默认边距大小为 1 em。

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

要摆脱它，您可以将 margin: 0 添加到您的 .nav-top 元素。