有没有一种简单的方法可以使 html textarea 和 input type 文本同样宽？
[英]Is there a simple way to make html textarea and input type text equally wide?
问题描述
是否有一种简单的方法可以让 HTML textarea 和 input type="text" 以（大约）相等的宽度（以像素为单位）呈现，适用于不同的浏览器？
CSS/HTML 解决方案会很棒。 我宁愿不必使用Javascript。
谢谢/埃里克
12 个解决方案
解决方案1
16 已采纳 2008-08-26 17:56:11
你应该可以使用
.mywidth { width: 100px; }
<input class="mywidth"> <br> <textarea class="mywidth"></textarea>
解决方案2
5 2008-08-28 15:33:01
回答第一个问题（尽管它已经被回答到死了）：CSS 宽度正是您所需要的。
但我想在答案中回答盖乌斯的问题。 Gaius，你的问题是你在 em 中设置宽度。 这是一个很好的想法，但您需要记住 em 是基于字体大小的。 默认情况下，输入区域和文本区域具有不同的字体和大小。 因此，当您将宽度设置为 35em 时，输入区域使用其字体的宽度，而 textarea 使用其字体的宽度。 文本区默认字体较小，因此文本框较小。 以像素或点为单位设置宽度，或确保输入框和文本区域具有相同的字体和大小：
.mywidth { width: 35em; font-family: Verdana; font-size: 1em; }
<input type="text" class="mywidth"/><br/> <textarea class="mywidth"></textarea>
希望有帮助。
解决方案3
4 2008-08-26 18:09:22
其他人提到了这一点，然后删除了它。 如果您想在没有类的情况下以相同的方式设置所有文本区域和文本输入的样式，请使用以下 CSS（在 IE6 中不起作用）：
input[type=text], textarea { width: 80%; }
解决方案4
3 2014-06-11 04:50:29
使用 CSS3 使文本框和输入的工作相同。 参见jsFiddle 。
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
解决方案5
3 2008-08-26 18:59:54
这是一个 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 规范的Box 尺寸部分中有描述，其中说：
框宽度由左右边距、边框和填充以及内容宽度的总和给出。
解决方案6
1 2008-08-26 17:56:25
就在这里。 尝试做这样的事情：
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
两者应该等同于相同的大小。 您可以使用绝对尺寸 (px)、相对尺寸 (em) 或百分比尺寸来实现。
解决方案7
0 2008-10-03 14:24:37
正如在XHTML 1.0 严格的 Unequal Html 文本框和下拉宽度中提到的，它还取决于您的文档类型。 我注意到在使用 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
请注意 - 宽度总是受到客户端发生的事情的影响 - PHP 不能影响这些事情。
在元素上设置一个公共类并在 CSS 中设置一个宽度是你最干净的选择。
解决方案10
0 2008-08-26 18:39:06
使用 CSS 类作为宽度，然后将您的元素放入 HTML DIV，具有上述类的 DIV。
这样，布局控制整体应该会更好。
解决方案11
0 2018-05-12 18:35:05
现在，如果您使用引导程序，只需为您的输入字段提供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>
解决方案12
-1 2013-07-23 13:32:26
您还可以使用以下 CSS：
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML：
<input class="mywidth" >
<textarea></textarea>
html5 或 css '智能文本流' 将句子或段落均匀分布在同样宽的行上？
[英]html5 or css 'smart text flow' to evenly distribute a sentence or paragraph over equally wide lines?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.