.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- height
,这使得利用em
这里一个不错的选择,因为即使line-height: 1.2
是一组,然后1.2em
对margin- bottom
和top
匹配。良好的编码以规范化站点的外观意味着line- height
应在某个点明确定义,因此,如果使用任何乘数方法,则等效em
单位的值将与相同line-height
。并且如果line- height
设置为非em``px
可以设置的长度(例如)。
使用诸如LESS或SCSS之类的css预处理器绝对具有变量或mixin可以帮助使这些值与适当的值保持匹配line- height
,或者可以使用javascript来动态读取这些值,但实际上,line-height
应该在使用此值的上下文中知道,并在此处进行适当的设置。
库比(Kubi)的评论指出,删除<a>
元素之间的空格的html缩小会导致对齐失败。一个在内部伪空间<a>
标签没有帮助(但预计,随着空间的内部发生inline-block
元件),<wbr>
之间添加<a>
标签没有帮助(可能是因为休息没有必要到下一行),因此,如果需要最小化,然后@R_419_2422@案是硬编码的不间断空格字符-
其他空格字符(如稀薄空间和en空格)不起作用(令人惊讶地)。
其中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中为Buggy)。
对于Webkit的,作为39版(至少,可能有早期蹑手蹑脚),它支持它 了-webkit-
,但是扩展 (可在完成chrome://flags/#enable-experimental-web-platform- features
)。有传言说版本41或42应该获得完全支持。由于webkit
尚未得到无缝支持, 。但是,我认为我应该发布它,因为它可能对某些人有用。