label和input對齊的方法

2021-08-04 06:47:35 字數 710 閱讀 2841

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;

input總是和button不能對齊

之前寫搜尋框時沒注意這個問題,按正常而定寫法input框和button邊框總是不能對齊,可以在控制台通過實驗button的marign top來調節,但是還是不太好的 這裡的總會出現錯位 解決1 在input和button外層都加一層span,使兩個span對齊,處理input邊框就行了,html ...

Label 關於Label富文字的幾個三方庫介紹

ios6 之後,uilabel加入了attributedtext屬性,為uilabel的文字顯示新增了巨大的變化,attributedtext使用coretext繪製,支援文字域字型 顏色等設定。在ios6 之前,uilabel 只能按照font,textcolor屬性設定的字型和顏色顯示文字,不能...

RelativeLayout的基本對齊方式

在relativelayout 相對布局 中,每個元件都可以通過id來指定相對於其它元件或者父元件的位置。1 通過id來指定相對於其它元件的位置,元件之間的相對位置關係設定如下 android layout above將元件放在指定id元件的上方 android layout below將元件放在指...