CSS：輸入字段和選擇選項錯誤？

爲什麼當我將它們設置爲100％時，輸入字段總是「超出」包含它們的div？CSS：輸入字段和選擇選項錯誤？

CSS，

.item-form { 
    margin:0px 0px 10px 0px; 
    clear:both; 
    border:1px solid #999966; 
} 

.item-form input, 
.item-form textarea, 
    { 
    background-color:#ffffff; 
    border: 1px solid #dddddd; 
    width:100%; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    padding:2px 2px 2px 2px; 
}

HTML，

<div class="item-form"> 
    <input name="username" type="text" id="username" value="" title="USER NAME"/> 
</div>

輸出， enter image description here

我該如何解決？

謝謝。

編輯：

我似乎有固定的輸入域的問題，但後來我遇到另一個問題就來了 - 選擇字段，

.item-form { 
    margin:0px 0px 10px 0px; 
    padding:0px 6px 0px 0px; /** important **/ 
    clear:both; 
    } 

.item-form select{ 
    border: 1px solid #dddddd; 
    width:100%; /** a bug to fix **/ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    padding:2px 2px 2px 2px; 
    color:#999; 
    }

現在選擇字段是「欠跑'！！

我該如何解決這個問題？

謝謝。

來源

2011-03-31 laukok

它給出輸入100％寬度，然後爲每邊添加2px填充和1px邊框。結果是6px太寬的輸入。

要修復，您需要通過向父元素添加填充來限制可用於輸入的寬度。在這種情況下，添加6像素右填充到.item-form：

.item-form { 
    padding-right: 6px; 
} 

.item-form input, 
.item-form textarea { 
    width: 100%; 
    padding: 2px; 
}

選擇是奇數的了，因爲它們不遵循上述規則（100％寬度包括填充） - 因此你不要想限制他們父母的寬度。所以訣竅是隻在輸入和textareas周圍填充包裝元素，而不是圍繞選擇。

請參閱this example以獲得像素完美對齊。

來源

2011-03-31 03:14:06

非常感謝。但現在我有另一個問題 - 選擇字段。請檢查我上面的編輯。謝謝。 – laukok 2011-03-31 03:34:38

@lauthiamkok，你的新輸入CSS是什麼？ – 2011-03-31 03:41:57

和以前一樣...我應該改變它嗎？ – laukok 2011-03-31 03:47:25

使用outline而不是border。 border影響佈局，因爲它爲邊界騰出空間。 outline只需簡單地描繪（或概述）邊緣並且不進行定位更改。這是兩個像素，因爲在兩邊都有兩個單像素邊框，導致它出現兩個像素。

來源

2011-03-31 03:35:31

CSS：輸入字段和選擇選項錯誤？

回答

相關問題