text-algin:justify实现文本两端对齐

先看图：

UI图是这样，我发现通过css写出来还没有那么容易。特此记录一下过程。

html部分:

        <div class="line">
             <span class="current">用户名</span>
             <input type="text">
        </div>
        <div class="line">
             <span class="current">密码</span>
             <input type="text">
        </div>
        <div class="line">
             <span class="current">用户手机号</span>
             <input type="text">
        </div>

CSS部分：

.line{
width: 100%;
height: 15px;
margin-bottom: 20px;
}
.current{
width: 80px;
height: 100%;
display: inline-block;
text-align: justify;
vertical-align: top;
}
.current::after{
content: "";
display: inline-block;
width: 100%;
overflow: hidden;
height: 0;
}

完美解决。