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;
雖然中間參考和借鑒的不少人的方法,但是總算對這一問題做了一個交代。

原文地址:http://blog.csdn.net/wangxiaohui6687/article/details/7875829


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM