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测试）

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的{{1}}也会匹配。用于规范化网站外观的良好编码意味着在某些时候top应该明确定义，因此如果使用任何乘数方法，则等效line-height单位将给出与{相同的值{1}}。如果em设置为非line-height长度，例如line-height，则可以设置em。

使用css预处理器（如LESS或SCSS）肯定使用变量或mixin可以帮助保持这些值与相应的px匹配，或者可以使用javascript动态读取这些，但实际上，{{1}应该在使用它的上下文中知道，并在此处进行适当的设置。

缩小文字（无空格）问题的更新

Kubi的评论指出，缩小html会删除line-height元素causes the justification to fail之间的空格。一个pseudo-space within the <a> tag does not help（但预期，因为空间发生在line-height元素内），<wbr> added between the <a> tags does not help（可能因为下一行不需要中断），所以如果缩小需要，然后the solution is a hard coded non-breaking space character   - thin space和en space等其他空格字符无效（令人惊讶）。

接近未来的清洁解决方案

A solution其中webkit was behind the times（截至首写时）是：

<a>

It works in FF 12.0+ and IE8+（IE7中的错误）。

对于Webkit，从版本39开始（至少可能早些时候已经悄悄进入）它确实支持没有 inline-block扩展名，但 仅用户启用了实验性功能（可以在.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 */ }完成）。有传言说版本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被黑客攻击的人 - 来吧！最好是html在语义上牺牲CSS而不是反之亦然。

所以，根据我的理解，你试图实现这种合理的内联块效果，而不必担心每次都重置line-height？我认为你只需添加

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

然后你就可以进行编码，好像什么都没发生一样。如果您担心表现，请参阅Paul Irish关于*选择器的引用：

“......除非你连接所有的javascript，把它放在底部，缩小你的css和js，gzip你的所有资产，然后无损压缩你的所有图像，否则你不能关心*的性能。你没有获得90多个Page Speed分数，现在考虑选择器优化还为时过早。“

希望这有帮助！

-J Cole Morrison

Answer 4

尝试text-align解决这个问题非常严厉。 text-align属性用于对齐块的内联内容（特别是文本） - 它并不意味着对齐html元素。

我知道你正在努力避免花车，但在我看来花车是完成你想要做的事情的最好方法。

Answer 5

在您的示例中，您有line-height:1.2，没有单位。这可能会导致问题。如果您没有使用边框，则可以向父母和孩子提供line-height 0。

我能想到的其他选择是：

在父级上使用display:table，在子级上使用display:table-cell来模拟表格行为。然后将第一个项目左对齐，最后一个项目右对齐。见fiddle。
使用javascript对导航子项进行计数，然后为它们提供均匀分布的宽度。例如。 4名儿童，每人25％width。并分别左右对齐第一个和最后一个项目。
有一种方法可以均匀地分配项目，但这是一种复杂的方法，需要在html中小心地放置一些非中断空格以及负边距text-align:justify。您可以尝试使用nav元素进行调整。请参见示例here。

Answer 6

你的小提琴非常具体。在我看来，这个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;
}

Answer 7

正如@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）。

Answer 8

我认为最好的方法是使用特定的class / id创建可点击元素，然后相应地指定float:left或float:right。希望有所帮助。

“text-align：justify;”内联块元素是否正确？

8 个答案:

目前的解决方法（IE8 +，FF，Chrome测试）

接近未来的清洁解决方案