css - "text-align: justify;"inline-block 元素正确吗？

Question

其他一些问题已经解决了如何最好地应用 text-align: justify 来使行内 block 元素均匀分布……例如，How do I *really* justify a horizontal menu in HTML+CSS?

但是，“清除”行内 block 元素行的 100% 宽度元素由浏览器赋予其自己的行。如果不在父元素上使用 line-height: 0;，我想不出如何摆脱空白的垂直空间。

有关问题的示例，请参阅 this fiddle

对于我使用 line-height: 0; 的解决方案，请参阅 this fiddle

我使用的解决方案要求将新的 line-height 应用到子元素，但是之前设置的任何 line-height 都将丢失。有人知道更好的解决方案吗？我想避免表格，以便元素可以在必要时换行，还有 flexbox，因为浏览器还不支持。我还想避免 float ，因为间隔开的元素数量是任意的。

Answer 1

更新了下面的“ future ”解决方案信息；仍未得到完全支持。

目前的解决方法(IE8+、FF、Chrome 测试)

See this fiddle.

相关 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%;
}

解释

display: block在 :before 上具有负下边距的元素会将文本行拉高一个行高，从而消除多余的行，但会替换文本。然后用 position: relative在 inline-block 上元素的位移被抵消，但没有添加额外的线。

虽然css不能直接访问line-height “单位”本身，使用em在margin-bottom和 top设置可轻松适应任何 line-height作为 multiplier values 之一给出.所以1.2 , 120% , 或 1.2em在关于 line-height 的计算中都相等 ，它利用了 em这里是一个不错的选择，即使line-height: 1.2已设置，则 1.2em对于 margin-bottom和 top将匹配。规范网站外观的良好编码意味着在某些时候 line-height应该明确定义，因此如果使用任何乘法器方法，则等效于 em unit 将给出与 line-height 相同的值.如果line-height设置为非 em长度，例如 px , 而不是可以设置。

使用 LESS 或 SCSS 等 CSS 预处理器的变量或混合肯定有助于使这些值与适当的 line-height 匹配。 ，或者 javascript 可以用来动态读取这样的，但实际上，line-height应该在使用它的上下文中知道，并在此处进行适当的设置。

更新缩小文本(无空格)问题

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 (可能是因为下一行不需要中断)，所以如果需要缩小，那么 the solution is a hard coded non-breaking space character   --其他空格字符，如thin space和 en space没有工作(令人惊讶)。

接近 future 的清洁解决方案

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 没有无缝支持它然而，它仍然只是部分解决方案。但是，我认为我应该发布它，因为它可能对某些人有用。