在处理一些表单内容时,我们经常遇到时长短不一的标题两端对齐的需求。
可以看出,其实text-align:justify对于最后一行是没有效果的。这个时候有两种解决方法。
1.在末尾添加元素
.item { height: 32px; line-height: 32px; margin-bottom: 8px;}
.label { display: inline-block; height: 100%; width: 100px; text-align: justify; vertical-align: top;}
.label::after { display: inline-block; width: 100%; content: ''; height: 0; }
.value { padding-right: 10px; }
2.属性text-align-last
兼容性一些浏览器不行
.item { margin-bottom: 8px;}
.label { display: inline-block; height: 100%; min-width: 100px; text-align: justify; text-align-last: justify; }
.value { padding-right: 10px; }