均匀分布，对齐的水平导航链接：如何删除空白中的垂直空间：内容后

Question

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

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

规则：

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

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

几乎可以工作的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 内容注入的额外垂直空间。 “下一个元素”应直接位于导航链接下方。谢谢。

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

目前想不出更好的办法。如果我这样做了，我会告诉你的。

Answer 2

这里的技巧与ul#nav:after伪元素有关：

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

这会在导航中插入一个附加元素，该元素具有我们尝试填充的容器的全宽（最近的祖先为position: relative）。这将设置ul#nav 的宽度，以便text-align: justify 将创建所需的间距效果。

尾随空格是ul#nav:after 伪元素的高度。在ul#nav 上设置font-size: 0 （根据@Josh Crozier 的回答）是强制行高为0 的间接方法。该方法在IE 中由于某种原因失败，但直接设置行高似乎在铬、FF、IE10+。我没有在 IE10 以下测试过，但我希望这至少可以通过 IE8 恢复。这是完整的解决方案：

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

Answer 3

我发现添加 font-size: 0;到 UL 选择器会在 IE10 中破坏它。