其他一些问题已经解决了如何最好地应用text-align: justify 以使内联块元素均匀分布……例如，How do I *really* justify a horizontal menu in HTML+CSS?
但是，“清除”行内块元素行的 100% 宽度元素由浏览器赋予其自己的行。如果不在父元素上使用line-height: 0;，我无法弄清楚如何摆脱那个空的垂直空间。
有关问题的示例，请参阅this fiddle
对于我使用line-height: 0; 的解决方案，请参阅this fiddle
我使用的解决方案要求将新的line-height 应用于子元素，但之前设置的任何line-height 都会丢失。有人知道更好的解决方案吗？我想避免使用表格，以便在必要时可以包装元素，还想避免使用 flexbox，因为还没有浏览器支持。我也想避免浮动，因为间隔的元素数量是任意的。
【问题讨论】：
标签： css text-align justify
更新了下面的“未来”解决方案信息；仍未完全支持。
相关 CSS
.prevNext {
text-align: justify;
}
.prevNext a {
display: inline-block;
position: relative;
top: 1.2em; /* your line-height */
}
.prevNext:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em; /* your line-height */
}
.prevNext:after {
content: '';
display: inline-block;
width: 100%;
}
说明
:before 元素上带有负下边距的 display: block 将文本行拉高一个行高，这消除了多余的行，但替换了文本。然后使用inline-block 元素上的position: relative 抵消位移，但不添加额外的线。
尽管 css 本身不能直接访问 line-height“单元”，但在 margin-bottom 和 top 设置中使用 em 很容易适应作为 multiplier values 之一给出的任何 line-height。所以1.2、120%或1.2em在计算中等于相对于line-height，这使得使用em成为一个不错的选择在这里，即使设置了line-height: 1.2，那么margin-bottom 和top 的1.2em 也会匹配。对站点外观进行规范化的良好编码意味着在某些时候应该明确定义line-height，因此如果使用任何乘法器方法，则等效的em 单元将给出与line-height 相同的值。如果line-height 设置为非em 长度，例如px，则可以设置。
使用诸如 LESS 或 SCSS 之类的 css 预处理器肯定有一个变量或 mixin 可以帮助保持这些值与适当的 line-height 匹配，或者 javascript 可以用于动态读取此类，但实际上，line-height 应该是已知的在使用 this 的上下文中，并在此处进行了适当的设置。
更新缩小文本（无空格）问题
Kubi 的评论指出，缩小了 html 以删除 <a> 元素 causes the justification to fail 之间的空格。一个pseudo-space within the <a> tag does not help（但这是意料之中的，因为空间发生在inline-block元素内），一个<wbr> added between the <a> tags does not help（可能是因为下一行不需要中断），所以如果需要缩小，那么@987654326 @--thin space 和 en space 等其他空格字符不起作用（令人惊讶）。
A solution 其中webkit was behind the times（在第一次写这篇文章时）是：
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE */
}
It works in FF 12.0+ and IE8+（IE7 中的错误）。
对于 Webkit，从第 39 版开始（至少，可能更早出现）它确实支持它没有 -webkit- 扩展但仅如果用户启用了实验性功能（可以在chrome://flags/#enable-experimental-web-platform-features完成）。有传言说版本 41 或 42 应该得到完全支持。由于 webkit 尚未无缝支持它，它仍然只是部分解决方案。但是，我认为我应该发布它，因为它可能对某些人有用。
【讨论】：
formatOutput = true“缩小”HTML。参照。 jsfiddle.net/QaS5J/1 我猜，一串无空格的内联块被视为一个单词，因此不合理。
nbsp; 上做一点说明。添加nbsp; 会导致内联块定位的微小偏移。为防止这种情况，请将每个 nbsp; 包装在 aspan.inivisible-space 中，并使用 font-size: 0; 创建一个类
考虑以下几点：
.prevNext {
display: table;
width: 100%
}
.prevNext a {
display: table-cell;
text-align: center
}
（另见edited fiddle。）这就是您要找的吗？这种技术的优点是您可以添加更多项目，并且它们都将自动居中。所有现代 Web 浏览器都支持。
【讨论】：
首先，我喜欢pseudo-element 的方法，以保持标记语义。我认为你应该坚持整体方法。这比使用表格、不必要的标记或顶级脚本来获取定位数据要好得多。
对于每个强调 text-align 是 hacky 的人 - 来吧！以牺牲 CSS 为代价让 html 具有语义比反之更好。
所以，据我了解，您正在尝试实现这种合理的内联块效果，而不必担心每次都重置 line-height 对吗？我认为你只是添加
.prevNext *{
line-height: 1.2; /* or normal */
}
然后你可以像什么都没发生一样开始编码。如果您担心性能，下面是 Paul Irish 关于 * 选择器的引用：
"...你不能关心 * 的性能，除非你连接你所有的 javascript，把它放在底部，缩小你的 css 和 js，gzip 你所有的资产，无损压缩你所有的图像。如果您没有获得 90+ 的 Page Speed 分数，现在考虑选择器优化还为时过早。”
希望这会有所帮助！
-J科尔·莫里森
【讨论】：
line-height: normal; :-p 它与我正在尝试做的事情非常吻合。它并没有摆脱line-height: 0;，而是将行高重置为标准化值。如果其他人想要覆盖 line-height，他们可以......仍在尝试探索 @MoinZaman 的 Sitepoint 链接，并希望可能有其他不需要 line-height: 0; 的答案，但这感觉很接近。
display: table 和display: table-cell 进行更改工作，但这些会导致更广泛的潜在后代css 冲突。在我看来，追求可维护和可理解的（并为flexbox祈祷）！
.prevNext > *所以它只查看直接子代而不是.prevNext的所有后代.当然，这仍然是 line-height 重置，在问题中 OP 说他试图避免。
line-height: 1.2em 或 line-height: 1.2 接近 line-height: normal，但每种字体都定义了自己的“正常”行高，因此 1.2 只是一个近似值。我没有意识到 line-height: normal 可以作为一个选项使用（我尝试了“默认”和“自动”，但在我的 Google 搜索中错过了“正常”）。我仍然想要一个更好的解决方案，但我认为这适用于 9/10 用例（适用于我的 SCSS mixin）。
尝试text-align 解决这个问题是相当骇人听闻的。 text-align 属性用于对齐块的内联内容（特别是文本）——它并不意味着对齐 html 元素。
我了解您正在尝试避免浮动，但我认为浮动是完成您想要做的事情的最佳方式。
【讨论】：
在您的示例中，您有line-height:1.2，没有单位。这可能会导致问题。如果你不使用边框，你可以给父母和孩子一个line-height 0。
我能想到的其他选择是：
【讨论】：
line-height: 0 对布局来说是个坏主意（它可能导致文本呈现在前一个和下一个兄弟元素之上，请参阅this fiddle）。对于＃1，如问题中所述，我试图避免使用表格，以便在必要时可以包装元素。对于#2，真正尝试避免使用 Javascript 并使其成为纯 CSS 解决方案。我想要一些我可以推出、设置和忘记的东西，而不用担心 JavaScript 是否/何时可用。
你的小提琴非常具体。在我看来，对于你的情况，这个 CSS 会很好用：
.prevNext {
border: 1px solid #ccc;
position: relative;
height: 1.5em;
}
.prevNext a {
display: block;
position: absolute;
top: 0;
}
.prevNext a:first-child {
left: 0;
text-align: left;
}
.prevNext a:last-child {
right: 0;
text-align: right;
}
【讨论】：
正如@Scotts 所说，以下内容已在 Chrome 中实现，没有 -webkit 部分，我真的很喜欢顺便说一句，特别是因为我们需要尽快摆脱 -browser-specific-shǐt。
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE + Chrome */
}
注意：虽然仍然是 Safari 和 Opera don't support it yet (08-SEPT-16)。
【讨论】：
我认为最好的方法是使用特定的class/id 创建可点击元素，然后相应地分配float:left 或float:right。希望有帮助。
【讨论】：