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

Question

其他一些问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布……例如，如何真正地*证明* HTML + CSS中的水平菜单？但是，浏览器为“清除”行内块元素行的100％宽度元素提供了自己的行。我不知道如何在不使用line-height: 0;父元素的情况下摆脱空的垂直空间。有关该问题的示例，请参见此小提琴对于我使用的解决方案line-height: 0;，请参见此小提琴我正在使用的解决方案要求line-height对子元素应用新的解决方案，但是之前设置的所有内容line-height都会丢失。有谁知道更好的解决方案？我想避免使用表，以便在必要时可以包装元素，也可以避免使用flexbox，因为还没有浏览器支持。我也想避免使用浮点数，因为间隔的元素数是任意的。

Answer 1

考虑以下：

.prevNext {

    display: table;

    width: 100%

}

.prevNext a {

    display: table-cell;

    text-align: center

}

（另请参阅编辑的小提琴。）这是您要找的东西吗？此技术的优点是您可以添加更多项目，并且它们都将自动居中。所有现代Web浏览器都支持。

Answer 2

首先，我喜欢的方法pseudo-element以保持标记语义。我认为您应该坚持采用整体方法。这比求助于表，不必要的标记或在顶部脚本中获取定位数据要好得多。

对于每个强调要text-align被黑客入侵的人-来吧！最好让html在语义上牺牲CSS而不是相反。

因此，据我所知，您正在尝试实现这种合理的内联块效果，而不必担心line-height每次都会重置吗？我认为您只需添加

.prevNext *{

    line-height: 1.2;  /* or normal */

}

然后，您可以进行编码，好像什么都没有发生。*如果您担心性能，这是Paul Irish关于选择器的报价：

“ ...除非您将所有JavaScript串联在一起，将它放在底部，缩小CSS和JS，压缩所有资产，并无损压缩所有图像，否则您不应该关心*的性能。要获得90以上的页面速度得分，现在考虑选择器优化还为时过早。”

希望这可以帮助！

-J科尔·莫里森