"text-align: justify;“正确地内联块元素？

Question

其他一些问题已经解决了如何最好地应用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，因为浏览器还不支持它。我还想避免浮点数，因为间隔开的元素的数量是任意的。

Answer 1

已更新下面的“未来”解决方案信息；但仍未完全支持。

当前解决方法(IE8+、FF、Chrome已测试)

与相关的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，则可以改为设置。

绝对有一个变量或混入使用css预处理器，如LESS或SCSS可以帮助保持这些值与适当的line-height匹配，或者javascript可以用来动态读取这些值，但实际上，line-height应该在使用它的上下文中是已知的，并在这里进行适当的设置。

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

Kubi的评论指出，删除<a>元素之间空格的html缩小了causes the justification to fail。一个pseudo-space within the tag does not help (但这是预期的，因为空格出现在inline-block元素中)、一个 added between the tags does not help (可能是因为下一行不需要换行)，所以如果需要缩小，那么the solution is a hard coded non-breaking space character --其他空格字符，如thin space和en space -不起作用(令人惊讶)。

接近未来的清洁解决方案

其中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中的buggy)。

对于Webkit，从版本39开始(至少在更早的时候可能已经悄悄进入)，它确实支持它，而不支持-webkit-扩展，但是如果 user <>E158>已经启用了实验功能<>E259，则只支持(这可以在chrome://flags/#enable-experimental-web-platform-features完成)。有传言说，版本41或42应该会得到完全的支持。由于它还没有得到webkit的无缝支持，它仍然只是一个局部的解决方案。然而，我想我应该把它贴出来，因为它对一些人来说是有用的。

Answer 2

请考虑以下几点：

.prevNext {
    display: table;
    width: 100%
}

.prevNext a {
    display: table-cell;
    text-align: center
}

​(另请参阅edited fiddle)。这就是你要找的吗？这种技术的优点是，您可以添加更多的项目，它们都将自动居中。所有现代Web浏览器都支持。

Answer 3

首先，为了保持标记的语义，我喜欢pseudo-element的方法。我认为你应该坚持整体的方法。这比借助于表格、不必要的标记或过多的脚本来获取定位数据要好得多。

对于每个人来说，对于text-align是黑客的压力-来吧！以CSS为代价的html是语义性的比反之亦然。

因此，根据我的理解，您正在尝试实现这种合理的内联块效果，而不必担心每次都要重置line-height，对吧？我认为你只是简单地添加了

.prevNext *{
    line-height: 1.2;  /* or normal */
}

然后你就可以开始编码了，就像什么都没发生过一样。如果你担心性能问题，下面是保罗·爱尔兰关于*选择器的话：

"...you是不允许关心*的性能的，除非你把所有的javascript连接在一起，把它放在底部，缩小你的css和js，压缩你所有的资源，无损地压缩你所有的图像。如果你得不到90+页面速度的分数，现在考虑选择器优化还为时过早。“

希望这能有所帮助！

-J科尔·莫里森