表单元素与提示文字无法对齐的问题(input,checkbox文字对齐)

文章的最终方法是:
1. 将文字第一字体设置为Tahoma;
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;
 
       这样表单元素和提示文字就达到完美的对齐了。但是等等这里说的对齐只是相对的对齐,原因是中文字体是方块字高度有可能是奇数或者偶数,input元素的高度是奇数当字体高度为偶数时,在网页中最小单位是1px,上下总是不能完美对齐的总有1px的差别。而这1px相对这里而言还是可以接受的。这样这篇文章对表单元素和提示文字的对齐问题探讨结束!
 
       但是给所有的input和label放到ul和li元素里并给li加上1px的实体border,再次在ie6和firefox中打开,结果使人大跌眼睛。IE6下input元素和label内的文字似乎对li上边框特别钟情,虽然对齐了文字却在li里向上飘移。即使我对input、label、 li都分别设置了line-height:;也无济于事。

怎么办?一位朋友的研究给了我启发,给label元素加上display:inline-block;这是奇迹出现了ie6和firefox表现一致;由此对关于input框对齐提示文字的探讨告一段落。总结最终的方法如下:
1. 将文字第一字体设置为Tahoma;
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;display:inline-block;
虽然中间参考和借鉴的不少人的方法,但是总算对这一问题做了一个交代。

原文地址:http://blog.csdn.net/wangxiaohui6687/article/details/7875829
钻研方向: CSS:浏览器兼容、组件化开发、LESS、SASS 主流UI插件:bootstrap3及其扩展插件 新一代技术:html5、css3 移动开发:响应式布局、jqueryMobile、zenpto 基本:原生js、js面向对象、jquery源码 模块化:reaJS、requireJS 框架:angular(MVVM)、backbone(MVC) 服务器端:nodejs 常用工具:grunt(打包工具)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值