thi*_*der 50 css text-align justify
还有一些其他问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布...例如,我如何*真正*证明HTML + CSS中的水平菜单？
但是,"清除"内联块元素行的100%宽度元素由浏览器给出了自己的行.我无法弄清楚如何在不使用line-height: 0;父元素的情况下摆脱那个空的垂直空间.
有关问题的示例,请参阅此小提琴
对于我使用的解决方案line-height: 0;,请看这个小提琴
我正在使用的解决方案要求将新line-height元素应用于子元素,但任何先前设置line-height都将丢失.有人知道更好的解决方案吗？我想避免表格,以便元素可以在必要时包装,还有flexbox,因为浏览器支持还没有.我也想避免浮动,因为间隔开的元素数量是任意的.
Sco*_*ttS 86
更新了下面的"未来"解决方案信息; 仍未完全支持.
相关的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给定的乘数值之一.所以1.2,120%或者在计算方面1.2em都是相同的,这使得在这里使用一个好的选择,即使被设置,然后为和将匹配.用于规范化站点外观的良好编码意味着在某些时候应该明确定义,因此如果使用任何乘数方法,那么等效单位将给出与之相同的值.并且如果设置为非长度,例如,则可以设置.line-heightemline-height: 1.21.2emmargin-bottomtopline-heightemline-heightline-heightempx
绝对有一个变量或mixin使用css预处理器,如LESS或SCSS可以帮助保持这些值匹配适当的line-height,或javascript可以用于动态读取,但实际上,line-height应该在使用它的上下文中知道,以及此处的相应设置.
更新缩小文本(无空格)问题
Kubi的评论指出,删除<a>元素之间空格的html缩小导致理由失败.一个在内部伪空间<a>标签没有帮助(但预计,随着空间的内部发生inline-block元件),<wbr>添加之间<a>标签没有帮助(可能是因为休息没有必要到下一行),因此,如果需要缩小,然后解决方案是硬编码的非破坏空间特征 - 其他空间字符,如薄空间和空间不起作用(令人惊讶).
的溶液,其中webkit是落伍了(作为第一写入此的)中的溶液:
.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开始(至少可能早先已经悄悄进入),它确实在没有-webkit-扩展的情况下支持它,但仅当用户启用了实验性功能时(可以在其中完成chrome://flags/#enable-experimental-web-platform-features).有传言说版本41或42应该看到完全支持.由于webkit尚未得到无缝支持,它仍然只是部分解决方案.但是,我认为我应该发布它,因为它对某些人有用.
考虑以下:
.prevNext {
display: table;
width: 100%
}
.prevNext a {
display: table-cell;
text-align: center
}
(另请参阅编辑过的小提琴.)这就是您要找的东西吗？这种技术的优点是你可以添加更多的项目,它们都将自动居中.所有现代Web浏览器都支持.