然而,“清除”inline-block元素的行的100%宽度元素由浏览器给出其自己的行。我不知道如何摆脱那个空的垂直空间,而不使用line-height:0;在父元素上。
有关问题的示例,请参见this fiddle
对于我的解决方案使用line-height:0;,参见this fiddle
我使用的解决方案要求一个新的行高应用于子元素,但任何以前设置的行高都会丢失。有人知道更好的解决方案吗?我想避免表,以便元素可以包装在必要时,还flexBox因为浏览器支持还没有。我也想避免浮点,因为被间隔的元素的数量将是任意的。
解决方法
现有解决方法(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元素之前拉动文本行一行高度,这消除了额外的行,但是替换文本。然后在位置:相对于inline-block元素的位移被抵消,但是没有添加额外的行。
尽管css不能直接访问行高“单位”本身,但在margin-bottom和top设置中使用em容易适应作为multiplier values之一给出的任何行高。因此1.2,120%或1.2em是所有等于在线高度的计算,这使得em在这里的使用是一个好的选择,因为即使line-height:1.2被设置,则1.2em为margin-bottom和top将匹配。良好的编码以规范化网站的外观意味着在某些点线高度应该明确定义,所以如果使用任何乘法器方法,那么等效em单位将给出与行高相同的值。如果line-height设置为非em长度,例如px,而不是可以设置。
绝对有一个变量或mixin使用css预处理器,如LESS或SCSS可以帮助保持这些值匹配适当的行高,或者javascript可以用于动态读取,但实际上,行高应该在上下文中知道这里使用的地方,以及这里做出的适当设置。
更新缩小文本(无空格)问题
Kubi的评论指出,html的缩小删除了< a>元素causes the justification to fail.一个pseudo-space within the <a>
tag does not help(但这是预期的,因为空间在inline-block元素内部发生),一个<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(作为第一个写作)是:
.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中的bug)。
对于Webkit,从版本39(至少,可能在早期crept),它支持它没有-webkit-扩展,但只有当用户已启用实验功能(可以在chrome:// flags /#启用 – 实验 – 网络平台特征)。谣言是,41或42版应该看到完全支持。因为它还没有被webkit无缝支持,它仍然只是一个部分解决方案。但是,我认为我应该发布,因为它可以是有用的一些。