有没有一种简单的方法可以使 html textarea 和 input type 文本同样宽？
[英]Is there a simple way to make html textarea and input type text equally wide?
问题描述
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. CSS/HTML 解决方案会很棒。 I would prefer not to have to use Javascript.我宁愿不必使用Javascript。
Thanks /Erik谢谢/埃里克
12 个解决方案
解决方案1
16 已采纳 2008-08-26 17:56:11
You should be able to use你应该可以使用
.mywidth { width: 100px; }
<input class="mywidth"> <br> <textarea class="mywidth"></textarea>
解决方案2
5 2008-08-28 15:33:01
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 question in the answers.但我想在答案中回答盖乌斯的问题。 Gaius, you're problem is that you are setting the width's in em's. Gaius，你的问题是你在 em 中设置宽度。 This is a good think to do but you need to remember that em's are based on font size.这是一个很好的想法，但您需要记住 em 是基于字体大小的。 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.因此，当您将宽度设置为 35em 时，输入区域使用其字体的宽度，而 textarea 使用其字体的宽度。 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:以像素或点为单位设置宽度，或确保输入框和文本区域具有相同的字体和大小：
.mywidth { width: 35em; font-family: Verdana; font-size: 1em; }
<input type="text" class="mywidth"/><br/> <textarea class="mywidth"></textarea>
Hope that helps.希望有帮助。
解决方案3
4 2008-08-26 18:09:22
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%; }
解决方案4
3 2014-06-11 04:50:29
解决方案5
3 2008-08-26 18:59:54
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 dimensions section 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.
解决方案6
1 2008-08-26 17:56:25
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) 或百分比尺寸来实现。
解决方案7
0 2008-10-03 14:24:37
As mentioned in Unequal Html textbox and dropdown width with XHTML 1.0 strict it also depends on your doctype.正如在XHTML 1.0 严格的 Unequal Html 文本框和下拉宽度中提到的，它还取决于您的文档类型。 I have noticed that when using XHTML 1.0 strict, the difference in width does indeed appear.我注意到在使用 XHTML 1.0 strict 时，确实会出现宽度差异。
解决方案8
0 2014-07-24 15:29:51
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
解决方案9
0 2008-08-26 18:01:35
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 中设置一个宽度是你最干净的选择。
解决方案10
0 2008-08-26 18:39:06
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.这样，布局控制整体应该会更好。
解决方案11
0 2018-05-12 18:35:05
These days, if you use bootstrap, simply give your input fields the form-control class.现在，如果您使用引导程序，只需为您的输入字段提供form-control类。 Something like:就像是：
<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>
解决方案12
-1 2013-07-23 13:32:26
you can also use the following CSS:您还可以使用以下 CSS：
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML: HTML：
<input class="mywidth" >
<textarea></textarea>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.