css - 使 inline-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;
}

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

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

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

Answer 1

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

nav ul {
   height: 20px;
}

小提琴

这段代码可以简化为：

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