有没有一种简单的方法可以使 html textarea 和 input type text 等宽？
https://stackoverflow.com/questions/28713
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
有没有一种简单的方法可以让 HTML 文本区域和输入 type="text" 以（大约）相等的宽度（以像素为单位）呈现，并且适用于不同的浏览器？
CSS/HTML 解决方案会很棒。我宁愿不必使用 Javascript。
谢谢 /埃里克
解决方案
你应该能够使用
.mywidth {
width: 100px;
}<input class="mywidth">
<textarea class="mywidth"></textarea>其他提示
回答第一个问题（虽然已经回答死了）：CSS 宽度就是您所需要的。
但我想回答 盖乌斯的问题 在答案中。Gaius，你的问题是你正在以 em 为单位设置宽度。这是一个很好的想法，但您需要记住，em 是基于字体大小的。默认情况下，输入区域和文本区域具有不同的字体和大小。因此，当您将宽度设置为 35em 时，输入区域将使用其字体的宽度，而文本区域将使用其字体的宽度。文本区域默认字体较小，因此文本框较小。设置以像素或点为单位的宽度，或者确保输入框和文本区域具有相同的字体和大小：
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>希望有帮助。
之前有人提到过这个，后来删掉了。如果您想在不使用类的情况下以相同的方式设置所有文本区域和文本输入的样式，请使用以下 CSS（在 IE6 中不起作用）：
input[type=text], textarea { width: 80%; }
这是一个 CSS 问题：宽度包括边框和填充宽度，在不同的浏览器中，INPUT 和 TEXTAREA 的默认值不同，因此也使它们相同：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
这在 盒子尺寸 CSS 规范的部分内容如下：
框宽度由左右边距、边框和填充以及内容宽度之和给出。
使用 CSS3 使文本框和输入框的工作方式相同。看 jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
就在这里。尝试做这样的事情：
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
两者应该等于相同的大小。您可以使用绝对尺寸 (px)、相对尺寸 (em) 或百分比尺寸来实现。
请注意 - 宽度总是受到客户端发生的事情的影响 - PHP 无法影响这些事情。
在元素上设置一个公共类并在 CSS 中设置宽度是最干净的选择。
使用 CSS 类作为宽度，然后将元素放入 HTML DIV 中，DIV 具有上述类。
这样，整体的布局控制应该会更好。
正如中提到的 XHTML 1.0 严格规定 Html 文本框和下拉菜单宽度不相等 它还取决于您的文档类型。我注意到，当使用 XHTML 1.0 strict 时，宽度的差异确实出现了。
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
如今，如果您使用引导程序，只需将输入字段指定为 form-control 班级。就像是：
<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">
<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>
您也可以使用以下CSS：
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML：
<input class="mywidth" >
<textarea></textarea>
