均匀间隔,对齐的水平导航链接:如何删除空的垂直空间:在内容之后

Question

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

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

规则:

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

这个解决方案几乎可以运作 - 它非常接近.但是引入空:在内容之后在导航容器中添加不需要的额外垂直空间(为什么？).有没有办法删除空注入的额外垂直空间:内容后？

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显示这看起来像什么,以及由内容后注入的额外垂直空间."下一个元素"应该直接位于导航链接下方.谢谢.

Answer 1

奇怪的问题.

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

由于空格是由字体的大小决定的,因此您可以将父项设置font-size为0,然后相应地设置子项font-size.它的工作.. jsFiddle例子

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

目前想不出更好的东西.如果我这样做,我会通知你.