姓名，手机号怎么左右对齐text-align

非常常见的需求在页面中，两端对齐文字端对齐。

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;便可以出现图中的效果。