当前位置: 代码迷 >> Web前端 >> label跟input对齐的方法
  详细解决方案

label跟input对齐的方法

热度:196   发布时间:2012-09-02 21:00:34.0
label和input对齐的方法

表单元素与提示文字无法对齐的问题(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;
虽然中间参考和借鉴的不少人的方法,但是总算对这一问题做了一个交代。


  相关解决方案