是否有简单的方法使html文本区域和输入类型的文本相等宽?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)

是否有一种简单的方法可以使HTML文本区域和type=“text”的输入框有(近似)相同的宽度(以像素为单位)呈现在不同的浏览器中?

CSS/HTML解决方案将是非常棒的。我宁愿不用Javascript。

提问于
用户回答回答于

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

用户回答回答于

CSS宽度是你所需要的。

EM是基于字体大小。默认情况下,输入区域和文本区域具有不同的字体面和大小。因此,当你将宽度设置为35em时,输入区域使用其字体的宽度,而Textarea则使用其字体的宽度。文本区域默认字体较小,因此文本框较小。要么设置以像素或点为单位的宽度,要么确保输入框和文本区域具有相同的字体面和大小:

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

扫码关注云+社区