DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS讓input button元素對齊的代碼收集
CSS讓input button元素對齊的代碼收集
編輯:CSS詳解     

收集一些用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和其他浏覽器的一樣*/

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved