22

有没有一种简单的方法可以让 HTML textarea 和输入 type="text" 以（大约）相等的宽度（以像素为单位）呈现，在不同的浏览器中工作？

CSS/HTML 解决方案会很棒。我宁愿不必使用 Javascript。

谢谢/埃里克

4

12 回答 12

16

你应该可以使用

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>

于 2008-08-26T17:56:11.327 回答
5

回答第一个问题（尽管它已经被回答死了）：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>

希望有帮助。

于 2008-08-28T15:33:01.200 回答
4

有人提到这个，然后删除它。如果您想在没有类的情况下以相同的方式设置所有文本区域和文本输入的样式，请使用以下 CSS（在 IE6 中不起作用）：

input[type=text], textarea { width: 80%; }
于 2008-08-26T18:09:22.090 回答
3

这是一个 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部分中有描述，其中说：

框宽度由左右边距、边框和内边距以及内容宽度之和给出。

于 2008-08-26T18:59:54.980 回答
3

使用 CSS3 使文本框和输入工作相同。请参阅jsFiddle。

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
于 2014-06-11T04:50:29.683 回答
1

就在这里。尝试做这样的事情：

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

两者应该等同于相同的大小。您可以使用绝对尺寸 (px)、相对尺寸 (em) 或百分比尺寸来实现。

于 2008-08-26T17:56:25.973 回答
0

请注意——宽度总是受到客户端发生的事情的影响——PHP 不能影响这些事情。

在元素上设置一个通用类并在 CSS 中设置一个宽度是你最干净的选择。

于 2008-08-26T18:01:35.540 回答
0

使用 CSS 类作为宽度，然后将您的元素放入 HTML DIV，具有上述类的 DIV。

这样，布局控制整体应该会更好。

于 2008-08-26T18:39:06.263 回答
0

正如在XHTML 1.0 严格的 Unequal Html 文本框和下拉宽度中提到的，它还取决于您的文档类型。我注意到，当使用严格的 XHTML 1.0 时，确实会出现宽度差异。

于 2008-10-03T14:24:37.663 回答
0 
input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
于 2014-07-24T15:29:51.670 回答
0

如今，如果您使用引导程序，只需为您的输入字段提供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>
于 2018-05-12T18:35:05.883 回答
-1

您还可以使用以下 CSS：

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML：

<input class="mywidth" >
<textarea></textarea>
于 2013-07-23T13:32:26.023 回答