CSS _text-align:justify;实现两端对齐
参考: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%; }