有没有一种简单的方法可以使 html textarea 和 input type text 一样宽？
Posted
技术标签:
【中文标题】有没有一种简单的方法可以使 html textarea 和 input type text 一样宽？【英文标题】：Is there a simple way to make html textarea and input type text equally wide? 【发布时间】：2010-09-06 22:07:24 【问题描述】：有没有一种简单的方法可以让 html textarea 和输入 type="text" 以（大约）相等的宽度（以像素为单位）呈现，并且适用于不同的浏览器？
CSS/HTML 解决方案会很棒。我宁愿不必使用 javascript。
谢谢 /埃里克
【问题讨论】：
查看Getting HTML textarea controls to expand to width of container的答案，它比这里包含的答案要好。或完整解释：Box Sizing | CSS-Tricks 【参考方案1】：你应该可以使用
.mywidth
width: 100px;
<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>【讨论】：
这似乎不再起作用，但是这个解决方案：***.com/questions/9555877/… 可以【参考方案2】：回答第一个问题（尽管它已经被回答死了）：CSS 宽度就是你所需要的。
但我想在答案中回答Gaius's question。 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】：其他人提到了这个，然后删除了它。如果您想在没有类的情况下以相同的方式设置所有文本区域和文本输入的样式，请使用以下 CSS（在 IE6 中不起作用）：
input[type=text], textarea width: 80%;
【讨论】：
【参考方案4】：这是一个 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 dimensions 部分中有描述，其中说：
框的宽度由左右边距、边框和内边距以及内容宽度之和给出。
【讨论】：
【参考方案5】：使用 CSS3 使文本框和输入功能相同。见jsFiddle。
.textarea, .textbox
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
【讨论】：
【参考方案6】：是的，有。尝试做这样的事情：
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
两者的大小应该相等。您可以使用绝对尺寸 (px)、相对尺寸 (em) 或百分比尺寸。
【讨论】：
【参考方案7】：请注意 - 宽度总是受到客户端发生的事情的影响 - php 无法影响这些事情。
在元素上设置一个通用类并在 CSS 中设置一个宽度是您最干净的选择。
【讨论】：
【参考方案8】：对宽度使用 CSS 类，然后将元素放入 HTML DIV，DIV 具有上述类。
这样布局控制整体应该会更好。
【讨论】：
【参考方案9】：正如Unequal Html textbox and dropdown width with XHTML 1.0 strict 中提到的，它还取决于您的文档类型。 我注意到在使用 XHTML 1.0 strict 时，确实会出现宽度差异。
【讨论】：
【参考方案10】：input[type="text"] width: 60%;
input[type="email"] width: 60%;
textarea width: 60%;
textarea height: 40%;
【讨论】：
【参考方案11】：如今，如果您使用引导程序，只需为您的输入字段提供 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】：你也可以使用以下 CSS：
.mywidth
width:100px;
textarea
width:100px;
HTML：
<input class="mywidth" >
<textarea></textarea>
【讨论】：
你的第一个解决方案已经被接受的答案提到了，第二个解决方案将使所有textareas 100px 宽。以上是关于有没有一种简单的方法可以使 html textarea 和 input type text 一样宽？的主要内容，如果未能解决你的问题，请参考以下文章
有没有一种简单的方法可以将谷歌登录按钮添加到 HTML 文件？
kindeditor使用方法，kindeditor怎么设置长宽度
kindeditor使用方法，kindeditor怎么设置长宽度