css - 使行内 block 元素不占用垂直空间

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

这非常适合将菜单项分布在栏的整个宽度上，如以下 fiddle 所示:http://jsfiddle.net/SjDEX/ .

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

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

Answer 1

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

nav ul {
   height: 20px;
}

Fiddle

这段代码可以简化为:

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