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

 1         <div class="line">
 2              <span class="current">用户名</span>
 3              <input type="text">
 4         </div>
 5         <div class="line">
 6              <span class="current">密码</span>
 7              <input type="text">
 8         </div>
 9         <div class="line">
10              <span class="current">用户手机号</span>
11              <input type="text">
12         </div>

.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;
}