有没有一种简单的方法让HTML文本框和输入框的宽度相等？

Question

有没有一种简单的方法让HTML文本框和输入框的宽度相等？

htmlcsstextarea

22

有没有一种简单的方法来使HTML textarea和input type="text"大致相等的宽度（以像素为单位）在不同的浏览器中呈现，CSS/HTML方案最好。我希望不要使用JavaScript。

谢谢 /Erik

- Erik Öjebo

1

请参考Getting HTML textarea controls to expand to width of container的答案，它比这里包含的答案更好。或者查看完整的解释：Box Sizing | CSS-Tricks。 - Yarin

12个回答

5

回答第一个问题（虽然已经被回答过很多次）：你需要使用CSS宽度。

但我想回答Gaius的问题。 Gaius，你的问题在于你正在使用em设置宽度。这是一个好的做法，但你需要记住em基于字体大小。默认情况下，输入区和文本区具有不同的字体和大小。因此，当你将宽度设置为35em时，输入区使用其字体的宽度，而文本区使用其字体的宽度。文本区默认字体较小，因此文本框也较小。要么以像素或点设置宽度，要么确保输入框和文本区具有相同的字体和大小：

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}

<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

希望这能帮到您。

- Lee Theobald

4

有人提到过这个问题，但是又删了。如果你想要统一样式所有的文本区域和文本输入框，而不使用类名，请使用以下CSS（在IE6中无效）：

input[type=text], textarea { width: 80%; }

- John Sheehan

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规范的盒模型部分中有详细描述，其中指出：

盒子宽度由左右边距、边框、内边距和内容宽度之和确定。

- Peter Hilton

3

使用CSS3使文本框和输入框的工作方式相同。请参见jsFiddle。

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

- Justin

1

是的，有的。尝试做这样的事情：

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

两者应该相等。您可以使用绝对尺寸（px）、相对尺寸（em）或百分比尺寸。

- James Burgess

0

现在，如果您使用Bootstrap，请给您的输入字段添加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>

- Kurt Van den Branden

0

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

- themeindia.org

0

如使用XHTML 1.0 strict时文本框和下拉框宽度不一致所述，这也取决于您的文档类型。我注意到，在使用XHTML 1.0 strict时，宽度差异确实会出现。

- boris callens

0

请注意 - 宽度始终受客户端发生的某些事情的影响 - PHP 无法影响这些事情。

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

- mercutio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Re0sless · Accepted Answer

你应该可以使用

中的技术

.mywidth {
  width: 100px;   
}

<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>