时间:2021-07-01 10:21:17 帮助过:79人阅读
法一: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作用域的使用
以上就是text-align如何实现两端对齐的详细内容,更多请关注Gxl网其它相关文章!