label 对齐

 <label for="username">用户名</label>
 <input type="text" id="username" name="username"/>
 </p>
 <p>
 <label for="password">密码</label>
 <input type="password" id="password" name="password"/>
 </p>
 <p>
 <label for="confirm_password">确认密码</label>
 <input type="confirm_password" id="confirm_password" name="confirm_password"/>

原来是这样的：

这时候需要给label加个样式即可对齐：

 label{
     display:inline-block;
     width:100px;<!-或者：min-width:100px;-->
 }

结果如下：

inline-block主要的用处是用来处理行内非替换元素的高宽问题的！
行内非替换元素，比如span、a等标签，正常情况下士不能设置宽高的，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高。
注意IE6不支持inline-block属性，可以用hack来解决：*display:inline;zoom:1;

by 小鬼PSer  2017-09-24  21:55:18