使内联块元素不占用垂直空间

Question

我有一个均匀分布的菜单，如：

HTML

<nav>
    <ul>
        <li><a href="">Home</a>
        </li>
        <li><a href="">About</a>
        </li>
        <li><a href="">Contact</a>
        </li>
        <li><a href="">Blog</a>
        </li>
    </ul>
</nav>

CSS

nav ul {
    padding:0;
    margin:0;
    text-align: justify;
    text-transform: uppercase;
    background-color: #000;
}
nav ul:after {
    content:'';
    width: 100%;
    display: inline-block;
    height: 0;
    line-height: 0;
    font-size: 0px;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color: #fff;
}

这非常适合在整个条形宽度上展开菜单项，这可以在这个小提琴中看到：http://jsfiddle.net/SjDEX/。

但是，您还可以看到::after元素的结果会增加ul的高度，从而在菜单项下方留出额外的空间。

有没有办法通过使after元素不占用垂直空间来摆脱这种情况？ 将其高度设置为0不会做任何事情并将其显示更改为阻止或其他内容会破坏布局。

Answer 1

ul本身有这个高度，而不是:after，所以只需添加

nav ul {
   height: 20px;
}

Fiddle

这段代码可以简化为：

nav ul:after {
    content:'';
    width: 100%;
    display: inline-block;
}