表單元素具有相同的寬度但未顯示對齊

Question

我有以下兩個表單字段。 它們具有相同的寬度，因此它們應該顯示為對齊，並且除了谷歌瀏覽器之外它們也是如此。 在谷歌瀏覽器中，textarea的寬度略高一些。 請幫我修理它。 謝謝

           <input name="phone" type="text" id="phone"  style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px;  margin-bottom:10px;" size="38" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
   <textarea
    name="message"
    cols="38"
    rows="12"
    id="message"
    style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:38px; margin-bottom:10px;overflow:hidden;"
    onFocus="if(this.value==this.defaultValue)this.value='';"
    onBlur="if(this.value=='')this.value=this.defaultValue;">
Message

Answer 1

在您發布的代碼中您的文本區域width:38px; 你的意思是width:385px; 匹配輸入字段的寬度？ 您可能還想包含reset.css

Answer 2

我懷疑textarea元素的樣式中的38px是一個拼寫錯誤，應該是385px，否則你將在所有支持CSS的瀏覽器上縮小該區域。 我懷疑在實際代碼中，有一些東西導致input和textarea元素之間的換行; 否則很難比較它們的寬度。

textarea在Chrome上略寬的原因是， 基於WebKit的瀏覽器的瀏覽器樣式表 ， textarea元素有2px填充。 如果您使用Chrome的Inspect元素工具（通過右鍵單擊）並在那里查看“指標”，則可以看到此信息。

然后明顯的解決方案是textarea { padding: 0; } textarea { padding: 0; } 。 但由於填充實際上很有用，因此設置可能更好

textarea, input { padding: 2px; }

Answer 3

您似乎使用size屬性調整input元素的size並在textarea中使用cols 。

您還正在定義兩種風格： width:385px和width:38px （不平等可能是你的問題）。 我不確定哪個需要預測（ size或cols ），但為什么不避免混淆，只為兩個元素設置相等的width ，只刪除size和row / col定義？