法一:text-align-last:justify;
html
<p> <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> </p>
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%; }
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
Node.js怎么部署HTTPS
JavaScript作用域的使用
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com