参考:https://segmentfault.com/q/1010000007136263
法一:text-align-last:justify;
html
<div>
<p class="item">
<label for="name" class="itemLabel">姓名</label>
<input type="text" class="itemContent" id="name">
</p>
<p class="item">
<label for="phone" class="itemLabel">手机号</label>
<input type="text" class="itemContent" id="phone">
</p>
</div>
css
.itemLabel{
display: inline-block;
width: 60px;
text-align-last:justify;
}
由于text-align-last的兼容性问题:https://caniuse.com/#search=text-align-last,需要使用法二实现:
css
.item{
position: relative;
}
.itemContent{
position: absolute;
left:70px;
}
.itemLabel{
display: inline-block;
width: 60px;
text-align: justify;
}
.itemLabel:after{
display: inline-block ;
content: '';
width: 100%;
}