收集一些用CSS控制INPUT/BUTTON等網頁元素與文字對齊的實用小代碼,細心的朋友會發現,如果前面一個INPUT,後邊是文字的話,你會發現文字和輸入框在垂直方向上不是對齊的,影響頁面美觀,因此本頁的代碼收集的包括了解決問題的一些實用技巧,希望對起到參考幫助作用。
1.input文本框下移的方法:padding-top ,你可以一點一點改變padding-top值來查看對齊效果,合適了就確定這個值,本方法可很好解決文本框下移問題。
2.input文本框和button對齊可以給他們外面加table (這個是從谷歌學來的,可看谷歌首頁)
3.表單和文字對齊可以設置父容器的字體為Tahoma,這是得出的經驗。
4.select, input,label,button{ vertical-align:middle; }(可以寫在頁面的最上面和*一樣,先規定好)
5.font-family:Arial,sans-serif,Tahoma; /*規定同一字體*/
font-size:12px; /*規定同一字體大小*/
height:25px; /*解決Safari和Chrome下的高度問題*/
line-height:15px; /*協調height,讓文字居中*/
overflow:visible; /*只有設置這個屬性IE下padding才能生效*/
padding:0 0.5em; /*Chrome、ff默認值;調整其值,讓IE和其他浏覽器的一樣*/