背景
如果我们要写了列表或表单类的样式,名称长短不一,但是想要两端对齐,如下面这样的:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/8a0affd053cb4d61bc12c5c169caf816.png)
你是怎么写的?
是这样的吗,在HTML里调整加空格:
<ul>
<li>用户名</li>
<li>账 号</li>
<li>验证码</li>
</ul>
那么如果有很多个这样的名称呢,如果字数为2、3、4、5、6个字呢?你要一个个改?一个个加空格?
解决方案
先上代码:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/e3e40af3e4e2460a8913da62e740d8bc.png#pic_center)
效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/200ff09d13e4477c91c3a9dfd89b593b.png)
原理
CSS属性text-align:justify
:内联元素左侧与块级元素左侧对齐,且内联元素右侧与块级元素右侧对齐, 即两端对齐
具体属性详解,请大家搜索吧!本文仅提供思路。