Question

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

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

规则：

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

This solution几乎可以运作 - 它非常接近。但是引入空：在内容之后在导航容器中添加不需要的额外垂直空间（为什么？）。有没有办法删除空注入的额外垂直空间：在内容之后？

几乎可行的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 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伪元素的高度。在font-size: 0上设置ul#nav（根据@Josh Crozier的回答）是将行高强制为0的间接方法。由于某种原因，该方法在IE中失败，但直接设置行高似乎适用于Chrome，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中打破它。

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

3 个答案: