在制作表单时，常常会遇到label标签需要两端对齐。
两端对齐首先想到的是text-align: justify属性。
text-align
当使用text-align: justify这个样式属性时，往往会不尽人意。因为这个属性只针对文本非尾行文字进行两端对齐。表格label往往只有一行，即使首行也是尾行，所以单单使用text-align: justify是达不到两端对齐的效果的。所以这里还要加一些其他属性。
利用伪元素制作制作尾行。
label {display: block}
label span {
display: inline-block;
width: 90px;
text-align: justify;
line-height: 0;
}
label span:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
}
text-align-last
同时对需要两端对齐的容器使用text-align: justify; text-aligin-last:justify 也可以达到尾行两端对齐的效果。
label span {
display: inline-block;
width: 90px;
text-align: justify;
text-aligin-last:justify;
}
-
text-align-last 浏览器兼容性
image.png
