相信有的有轻微强迫症的产品需求人员会提出让文字两端对齐的需求,比如说从上面的样子变成下面的样子
这时我们需要css中的text-align: justify;但是它不处理块内的最后一行,所以块内不能只有一个元素,所以我们可以在块内加入元素
<div>
姓名<i></i>
</div>
<div>
受访人<i></i>
</div>
<div>
联系电话<i></i>
</div>
然后设置css
div{
width:100px;
text-align: justify;
}
div i{
display:inline-block;
/*padding-left: 100%;*/
width:100%;/*padding-left和width二选一即可*/
}
但是在谷歌,IE和火狐运行之后发现,IE上不生效,容器标签需要改成这样
div{
width:100px;
text-align: justify;
text-justify:inter-ideograph;
}