浮动左侧时li元素下的未知边距

Question

我已经使用css制作了一个简单的导航栏，但有些是如何在<li>标签的底部显示边距。这是图片。当我移除浮动属性时<li>下的边距消失。

这是css。

nav{
    background:#333;
}
nav ul{
    display:inline-block;
}
nav ul li{
    display:inline;
    float:left;
    list-style:none;
}
nav ul li a{
    color:#fff;
    padding:15px;
    display:block;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
}

Answer 1

您应该从display:inline-block;中删除nav ul，并使用display:inline-block;添加nav ul li而不使用float，即

nav{
    background:#333;
}
nav ul li{
    display:inline-block;
    list-style:none;
}
nav ul li a{
    color:#fff;
    padding:15px;
    display:block;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
}

Answer 2

将内联块添加到li

<强> DEMO

<强> CSS

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