& lt;输入类型=&#39;文本'/& gt;和< textarea& gt;宽度 [英] Problem with &lt;input type=&#39;text&#39; /&gt; and &lt;textarea&gt; width
问题描述
在下面的代码中，INPUT和TEXTAREA元素均呈现超出其应有的宽度.如何将它们限制为div内可用区域的100％?
In the following code, both the INPUT and TEXTAREA elements render wider than they should. How can I limit them to 100% of the usable area within the div?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
.mywidth{ width:100%; }
</style>
</head>
<body>
<div style="border: 3px solid green; width: 100px;">
<input class="mywidth" ><br />
<textarea class="mywidth"></textarea><br />
<div style="background-color: yellow;" class="mywidth">test</div>
</div>
</body>
</html>
注意:如果删除DOCTYPE，它将按预期方式呈现，而INPUT，TEXTAREA和内部DIV的宽度均相同，并且不会超出所包含的DIV的范围.
Note: If I remove the DOCTYPE, it renders as expected, with the INPUT, TEXTAREA and inner DIV all the same width and not going outside the containing DIV.
更新:尽管这些元素没有默认边框，但在 IE7 中它仍然显示不正确.
Update: Not withstanding the default borders on those elements, it still appears to render incorrectly in IE7.
推荐答案
默认情况下，输入和文本区域均带有边框
Inputs and textareas both have borders by default
<style>
.mywidth{
width:100%;
border:0;
}
</style>
将呈现容器中的所有元素.
will render all the elements within your container.
更新
IE在每个元素上也都具有左右填充，以下css适合FF3，FF2，Safari 3，IE6和IE7中容器内的所有元素.
IE also has left and right padding on each element and the following css fits all the elements within the container in FF3, FF2, Safari 3, IE6 and IE7.
<style>
.mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>
但是，请不要忘记您可能需要边框，也可能需要填充，以使字段正常显示给用户.如果您自行设置边框并进行填充，那么您将知道，在浏览器中，容器的宽度与需要为input/textarea元素赋予的宽度之间的区别是什么.
However, don't forget that you will probably need a border, and perhaps the padding too, in order to make the fields appear to users as normal. If you set that border and padding yourself then you will know what the difference is, across browsers, between the width of the container and the width you will need to give to the input/textarea elements.
这篇关于& lt;输入类型=&#39;文本'/& gt;和< textarea& gt;宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
