码迷,mamicode.com
首页 > 其他好文 > 详细

label 对齐

时间:2017-09-24 23:31:04      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:sdn   设置   原来   str   hack   块级元素   ext   样式   属性   

 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     width:100px;<!-或者:min-width:100px;-->
4 }

结果如下:

技术分享

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

 

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

label 对齐

标签:sdn   设置   原来   str   hack   块级元素   ext   样式   属性   

原文地址:http://www.cnblogs.com/php-qiuwei/p/7588904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!