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元素之间的换行;否则很难比较它们的宽度。

Chrome上textarea略宽的原因是browser stylesheet for WebKit-based browsers，textarea元素有2px填充。如果您使用Chrome的Inspect元素工具（通过右键单击）并在那里查看“Metrics”，您可以看到这一点。

然后明显的解决方案是textarea { padding: 0; }。但由于填充实际上很有用，因此设置

可能更好

textarea, input { padding: 2px; }

Answer 3

您似乎正在使用size属性调整输入元素的大小，并在textarea中使用cols。

您还要定义两种样式：width:385px和width:38px（不平等可能是您的问题）。我不确定哪个需要预先考虑（size或cols），但为什么不避免混淆，只为两个元素设置相等的width，然后删除{{1} }和size / row定义？

表单元素具有相同的宽度但未显示对齐

3 个答案: