非常常见的需求在页面中,两端对齐文字端对齐。
HTML代码如下:
<div class="item">
<i><img src="images/icon-avatar.png" alt="error"></i>
<span class="item-name item-name-esp">姓名</span>
<input type="text" placeholder="请输入姓名" class="item-ipt" />
</div>
<div class="item">
<i><img src="images/icon-tel.png" alt="error"></i>
<span class="item-name">手机号</span>
<input type="number" placeholder="请输入上海联通手机号" class="item-ipt tel"/>
</div>
CSS代码如下:
.item .item-name-esp {
display: inline-block;
width: 1.67rem;
text-align: justify;
text-align-last: justify;
}
注意: text-align不会处理被打断的行和最后一行,因为这里的文字只是占了一行,所以 也是最后一行。所以设置text-align:justify不会产生任何效果。
所以解决方法就是,设置text-align-last: justify;便可以出现图中的效果。