有没有简单的方法来使html textarea和输入类型文本同样宽？

是否有一种获取HTML textarea的简单方法，并且输入type =“text”要以（近似）相等的宽度（以像素为单位）呈现，并且可以在不同的浏览器中使用？有没有简单的方法来使html textarea和输入类型文本同样宽？

一个CSS/HTML解决方案将是辉煌的。我宁愿不必使用Javascript。

感谢 /埃里克

2008-08-26 Erik Öjebo

看到答案为[获取HTML textarea的控制扩展到容器的宽度（http://stackoverflow.com/a/9556001/165673），它比这里包括的答案。或者为了完整的解释：[Box Sizing | CSS-Tricks]（http://css-tricks.com/box-sizing/） – Yarin 2012-03-04 21:51:07

您应该能够使用

.mywidth { 
 
    width: 100px; 
 
}

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

来源

2008-08-26 17:56:11 Re0sless

这似乎不工作了，但是这个解决方案：http://stackoverflow.com/questions/9555877/getting-html- textarea-controls-to-width-of-container/9556001＃9556001 does – H2ONOCK 2013-11-28 10:29:23

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

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

两者应该等同于相同的大小。您可以使用绝对尺寸（px），相对尺寸（em）或百分比尺寸。

来源

2008-08-26 17:56:25

只是一个说明 - 宽度总是受到客户端发生的事情的影响 - PHP不能影响这些事情。

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

来源

2008-08-26 18:01:35 mercutio

其他人提到过，然后删除它。如果你想样式的所有文本域和文本输入同样的方式，而不类，使用下面的CSS（在IE6不工作）：

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

来源

2008-08-26 18:09:22

使用一个CSS类的宽度，然后将你的元素融入到HTML的DIV，具有上述类别的DIV。

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

来源

2008-08-26 18:39:06 Drakiula

这是一个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-26 18:59:54

要回答第一个问题（尽管它已被解答）：CSS宽度是您需要的。

但我想回答Gaius's question的答案。盖厄斯，你的问题是你正在设置宽度的时间。这是一个很好的想法，但你需要记住，这是基于字体大小。默认情况下，输入区域和textarea具有不同的字体大小&大小。所以当你将宽度设置为35em时，输入区域使用它的字体宽度，textarea使用它的字体宽度。文本区域的默认字体较小，因此文本框较小。任一组的宽度以像素为单位或点，或确保输入框和文字区域具有相同的字型大小&：

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

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

希望有所帮助。

来源

2008-08-28 15:33:01

正如Unequal Html textbox and dropdown width with XHTML 1.0 strict中所述，它也取决于您的文档类型。我注意到，严格使用XHTML 1.0时，确实会出现宽度差异。

来源

2008-10-03 14:24:37

-1

，您还可以使用以下 CSS：

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

HTML：

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

来源

2013-07-23 13:32:26 vitaj

您的第一个解决方案已经被接受的答案提及，第二个解决方案将使所有`textarea`s宽度为100px。 – Manuel 2013-07-23 13:52:47

使用CSS3，使文本框和输入的工作是相同的。见jsFiddle。

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

来源

2014-06-11 04:50:29 Justin

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

来源

2014-07-24 15:29:51

有没有简单的方法来使html textarea和输入类型文本同样宽？

回答

相关问题