简单的表单对齐
先来看看最终的效果：
这里主要关注如何将“用户名”“请设置密码”以及他们紧跟的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设置一样就能对齐了！
