“ 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科尔·莫里森