“text-align：justify;”正确地内嵌块元素？
还有其他一些问题已经解决了如何最好地应用text-align: justify让内联块元素均匀分布…例如， 我怎样*真的*certificateHTML + CSS中的水平菜单？
但是，“清除”内嵌块元素的行的100％宽度元素由浏览器自行设置。 我不知道如何摆脱空的垂直空间，而不使用line-height: 0; 在父元素上。
有关问题的示例，请参阅此小提琴
对于我的解决scheme，使用line-height: 0; ，看到这个小提琴
我使用的解决scheme要求对子元素应用新的line-height ，但之前设置的line-height将丢失。 有谁知道更好的解决scheme？ 我想避免表，以便元素可以在必要时包装，也因为浏览器的支持还没有弹性盒。 我也想避免浮动，因为被分开的元素的数量是任意的。
更新了下面的“未来”解决scheme信息; 还没有完全支持。
目前的解决方法（IE8 +，FF，Chrometesting）
看到这个小提琴。
相关的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将文本行拖到一行高度上，从而消除了多余的行，但取代了文本。 然后在position: relative对于inline-block单元，位移被抵消，但是没有增加额外的线。
尽pipecss本身不能直接访问line-height “单位”，但在margin-bottom和top设置中em的使用很容易适应作为乘数值之一给出的任何line-height 。 所以1.2em 120%或1.2em line-height计算上都是相等的 ，这使得在这里使用em是一个很好的select，即使line-height: 1.2被设置，然后1.2em用于margin-bottom和top将匹配。 良好的编码标准化的网站的外观意味着在某些点line-height应明确定义，所以如果使用任何乘数方法，那么等效的em单位将给出相同的价值作为line-height 。 如果line-height设置为非em长度，例如px ，则可以设置。
绝对有一个variables或混合使用CSS预处理器，如LESS或SCSS可以帮助保持这些值匹配适当的line-height ，或JavaScript可以用来dynamic地读取，但实际上， line-height应该在上下文中已知在哪里使用，以及在这里进行适当的设置。
更新缩小文本（无空格）的问题
Kubi的评论指出，缩小<a>元素之间空格的html会导致失败 。 在<a>标签内的伪空间并没有帮助 （但是这是预期的，因为空间在inline-block元素内部发生）， <a>标签之间添加的<wbr>没有帮助 （可能是因为下一行不需要中断），所以如果需要缩小，那么解决scheme就是一个硬编码的不间断的空格字符 – 其他空间字符，如薄空间和en空间不起作用（令人惊讶）。
接近未来的清洁解决scheme
webkit在时代背后的 解决scheme是：
.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 */ }
它适用于FF 12.0+和IE8 + （在IE7中的越野车）。
对于Webkit，从版本39开始（至less可能早些时候已经开始），它支持它，但不支持-webkit-扩展，但只有当用户启用了实验function （可以在chrome://flags/#enable-experimental-web-platform-features ）。 有传闻说41或42版应该得到全力支持。 由于webkit还没有完全支持， 所以它仍然只是一个部分的解决scheme 。 但是，我认为我应该发布它，因为它可以用于一些。
考虑以下几点：
.prevNext { display: table; width: 100% } .prevNext a { display: table-cell; text-align: center }
（另见编辑小提琴 。）那是你在找什么？ 这种技术的优点是你可以添加更多的项目，他们都将自动居中。 受所有现代Web浏览器支持。
首先，我喜欢pseudo-element的方法，以保持标记的语义。 我认为你应该坚持总体方针。 这比用表格，不必要的标记，或者通过顶级脚本获取定位数据要好得多。
对于每个人都强调的text-align是哈克 – 来吧！ html代码的语义要好于CSS代码，反之亦然。
那么，从我的理解中，你正试图达到这种合理的内联块效应，而不必担心每次都会重新设置line-height ？ 我认为你只是添加
.prevNext *{ line-height: 1.2; /* or normal */ }
然后你可以去编码，就好像什么都没有发生。 如果你担心performance的话，这里是保罗·爱尔兰关于*select的引用：
“…你不能关心*的性能，除非你连接所有的JavaScript，把它放在底部，缩小你的CSS和JS，GZIP所有的资源，并无损地压缩所有的图像。如果你不是'拿到90+页面速度分数，现在考虑select器优化还为时过早。“
希望这可以帮助！
-J Cole Morrison
试图text-align这个问题是相当hackish。 text-align属性是为了alignment块（特别是文本）的内联内容 – 它并不意味着alignmenthtml元素。
我明白，你正在试图避免浮动，但在我看来，浮动是完成你想要做的最好的方法。
在你的例子中，你有line-height:1.2 ，没有单位。 这可能会导致问题。 如果你不使用边界，你可以给父母和孩子一个0的line-height 。
我能想到的其他选项是：
- 在父级上使用
display:table并在子级上display:table-cell来模拟类似于表的行为。 你把第一个项目alignment，最后一个alignment。 看到这个小提琴 。 - 使用JavaScript来做一个计数的导航儿童，然后给他们一个平均分配的宽度。 例如。 4个孩子，每个25％
width。 并分别左右alignment第一个和最后一个项目。 - 有一种均匀分布项目的方法，但是这是一个复杂的方法，需要一些非破坏性的空间小心地放在HTML中，以及负边距和
text-align:justify。 你可以尝试和适应nav元素。 看这里的例子。
你的小提琴是非常具体的。 在我看来，你的情况下这个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; }
正如@Scotts所述，Chrome内部已经实现了以下function，没有-webkit部分，我真的很喜欢btw，特别是因为我们需要尽快摆脱-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仍然不支持 （08年9月8日）。
我认为最好的方法是创build具有特定class / id的clickable元素，然后相应地分配float:left或float:right 。 希望有所帮助。
