简单的表单对齐

Posted 2020-09-22 Stephen666

先来看看最终的效果：

这里主要关注如何将“用户名”“请设置密码”以及他们紧跟的input元素设置为图中的对齐样式。

先来看看html代码：

1 <div class="item">
2   <label><span>*</span>用户名：</label><input type="text" name="nick" id="nick"/>
3 </div>
4 <div class="item">
5   <label><span>*</span>请设置密码：</label><input type="password" name="psw"/>
6 </div>

注意为什么要使用label来包裹“用户名”“请设置密码”，马上就会用到，css代码如下：

1 .item > label{
2   display:inline-block;
3   width:290px;
4   text-align:right; /* 这句话是对齐的关键 */
5   color:#999;
6 }

注意这里对label使用了inline-block属性值，也就是说可以将这个本身是行内元素的label当成块级元素来调整宽高，同时保留了行内元素不会换行的特性，让这个label和后面的input在一行中显示，这个是完成对齐的前提；

其次，将label设置为text-align：right来使label内的文字向右边缘紧靠，从而视觉效果上达到文字和input紧靠的目的，所以这里只需要将包裹“用户名”和“请设置密码”的两个label的width设置一样就能对齐了！