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

Posted 2023-04-13

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

【英文标题】：Evenly spaced, justified horizontal nav links: How to remove vertical space in empty :after content

【发布时间】：2013-12-06 16:49:38

【问题描述】：

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

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

【参考方案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;

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

【讨论】：

我希望有更优雅的东西，但这会奏效，谢谢。主要的是你解释了额外空间的来源（父母的字体大小。），这对我来说是个谜。标记为解决方案。

@mr_reamer 是正确的，因为它在 IE 中失败。我测试了 IE10 和 IE11。

【参考方案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;

【参考方案3】：

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