有没有一种简单的方法可以使 html textarea 和 input type 文本同样宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a simple way to make html textarea and input type text equally wide?
提问by Erik ?jebo
Is there a simple way of getting a HTML textarea and an input type="text" to render with (approximately) equal width (in pixels), that works in different browsers?
是否有一种简单的方法可以让 HTML textarea 和 input type="text" 以（大约）相等的宽度（以像素为单位）呈现，适用于不同的浏览器？
A CSS/HTML solution would be brilliant. I would prefer not to have to use Javascript.
CSS/HTML 解决方案会很棒。我宁愿不必使用Javascript。
Thanks /Erik
谢谢/埃里克
采纳答案by Re0sless
You should be able to use
你应该可以使用
.mywidth {
width: 100px;
}<input class="mywidth">
<textarea class="mywidth"></textarea>回答by Lee Theobald
To answer the first question (although it's been answered to death): A CSS width is what you need.
回答第一个问题（尽管它已经被回答到死了）：CSS 宽度正是您所需要的。
But I wanted to answer Gaius's questionin the answers. Gaius, you're problem is that you are setting the width's in em's. This is a good think to do but you need to remember that em's are based on font size. By default an input area and a textarea have different font faces & sizes. So when you are setting the width to 35em, the input area is using the width of it's font and the textarea is using the width of it's font. The text area default font is smaller, therefore the text box is smaller. Either set the width in pixels or points, or ensure that input boxes and textareas have the same font face & size:
但我想在答案中回答盖乌斯的问题。Gaius，你的问题是你在 em 中设置宽度。这是一个很好的想法，但您需要记住 em 是基于字体大小的。默认情况下，输入区域和文本区域具有不同的字体和大小。因此，当您将宽度设置为 35em 时，输入区域使用其字体的宽度，而 textarea 使用其字体的宽度。文本区默认字体较小，因此文本框较小。以像素或点为单位设置宽度，或确保输入框和文本区域具有相同的字体和大小：
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>Hope that helps.
希望有帮助。
回答by John Sheehan
Someone else mentioned this, then deleted it. If you want to style all textareas and text inputs the same way without classes, use the following CSS (does not work in IE6):
其他人提到了这一点，然后删除了它。如果要在没有类的情况下以相同的方式设置所有文本区域和文本输入的样式，请使用以下 CSS（在 IE6 中不起作用）：
input[type=text], textarea { width: 80%; }
回答by Justin
回答by Peter Hilton
This is a CSS question: the width includes the border and padding widths, which have different defaults for INPUT and TEXTAREA in different browsers, so make those the same as well:
这是一个 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>
This is described in the Box dimensionssection of the CSS specification, which says:
这在 CSS 规范的Box 尺寸部分中有描述，其中说：
The box width is given by the sum of the left and right margins, border, and padding, and the content width.
框宽度由左右边距、边框和填充以及内容宽度的总和给出。
回答by James B
Yes, there is. Try doing something like this:
就在这里。尝试做这样的事情：
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
Both should equate to the same size. You can do it with absolute sizes (px), relative sizes (em) or percentage sizes.
两者应该等同于相同的大小。您可以使用绝对尺寸 (px)、相对尺寸 (em) 或百分比尺寸来实现。
回答by mercutio
Just a note - the width is always influenced by something happening on the client side - PHP can't effect those sorts of things.
请注意 - 宽度总是受到客户端发生的事情的影响 - PHP 不能影响这些事情。
Setting a common class on the elements and setting a width in CSS is your cleanest bet.
在元素上设置一个公共类并在 CSS 中设置一个宽度是你最干净的选择。
回答by Drakiula
Use a CSS class for width, then place your elements into HTML DIVs, DIVs having the mentioned class.
使用 CSS 类作为宽度，然后将您的元素放入 HTML DIV，具有上述类的 DIV。
This way, the layout control overall should be better.
这样，布局控制整体应该会更好。
回答by Boris Callens
As mentioned in Unequal Html textbox and dropdown width with XHTML 1.0 strictit also depends on your doctype. I have noticed that when using XHTML 1.0 strict, the difference in width does indeed appear.
正如在XHTML 1.0 严格的 Unequal Html 文本框和下拉宽度中提到的，它还取决于您的文档类型。我注意到在使用 XHTML 1.0 strict 时，确实会出现宽度差异。
回答by themeindia.org
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
