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

我用css制作了一个简单的导航栏，但是它在我的

标签底部显示了边距。这里是图片。当我删除float属性时，
下的边距消失了


这是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;
}

您应该删除
display:inline块从
导航ul
并使用
显示：内联块用于无浮动的
导航ul li
，即

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;
}

将内联块添加到li


CSS

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

你能贴一把小提琴吗？删除
display:inline
，因为它对
float:left
没有用处，并添加
height:100%
。在你的LI上有display:inline和float:left有点多余，是吗？你能发布整个事情的JSFIDLE吗？在JSFIDLE中，结果完全不同@BramVanroy不起作用。