label 对齐

 1 <label for="username">用户名</label>
 2 <input type="text" id="username" name="username"/>
 3 </p>
 4 <p>
 5 <label for="password">密码</label>
 6 <input type="password" id="password" name="password"/>
 7 </p>
 8 <p>
 9 <label for="confirm_password">确认密码</label>
10 <input type="confirm_password" id="confirm_password" name="confirm_password"/>

原来是这样的：

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

1 label{
2     display:inline-block;
3     100px;<!-或者：min-100px;-->
4 }

结果如下：

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

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