html - 间隔均匀，对齐的水平导航链接 : How to remove vertical space in empty :after content

Question

我正在尝试实现这样的水平导航链接:

|--------------------------------------| 
|Link1   L2   LongLink3   Link4   Link5|
|--------------------------------------|

规则:

• 链接间隔均匀(每个链接之间的空白量相同)
• 链接可以是可变宽度的
• 总的来说，链接延伸到其容器的整个可用宽度
• 第一个和最后一个链接与其容器的边缘对齐(链接是对齐的)
• 适用于 IE8+
• CSS/HTML 解决方案，无 JavaScript
• 无法设置特定的容器高度或链接高度
• 不能预先计算和硬编码链接之间的空间(链接数量以后可能会改变)

This solution几乎可以工作——它是如此接近。但是引入空的 :after 内容会在导航容器中增加不需要的额外垂直空间(为什么？)。有没有办法去除空的 :after 内容注入(inject)的额外垂直空间？

几乎可以工作的 HTML:

<ul id="nav">
    <li><a href="#">HOME</a></li>  <!--
    --><li><a href="#">ABOUT</a></li>  <!--
    --><li><a href="#">BASIC SERVICES</a></li>  <!--
    --><li><a href="#">OUR STAFF</a></li>  <!--
    --><li><a href="#">CONTACT US</a></li><!--
--></ul><!--
--><h2>next element</h2>

几乎可以工作的 CSS:

* {
    padding: 0;
    margin: 0;
}
#nav {
    text-align: justify;
    outline: 1px solid grey;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
    background-color: green;
}
#nav a:link {
    display: block;
    color: white;
    padding: 1em 0;
}

jsfiddle显示它的样子，以及 :after 内容注入(inject)的额外垂直空间。 “下一个元素”应该在导航链接的正下方。谢谢。

Answer 1

奇怪的问题。

我假设它与内联元素尊重标记中的空格这一事实有关，尽管空格是 text-align:justify 工作所必需的，因此它不能被删除.

由于空白由字体大小决定，您可以将父级的font-size设置为0，然后设置子级的font-size 相应地。它有效.. jsFiddle example

#nav {
    text-align: justify;
    outline: 1px solid grey;
    font-size:0;
}
#nav li {
    display: inline-block;
    background-color: green;
    font-size:16px;
}

暂时想不出更好的办法。如果我这样做，我会通知你。