Question

在下面的代码中，INPUT和TEXTAREA元素都比它们应该更宽。如何将它们限制在div中可用区域的100％？

<!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。

更新：除了这些元素的默认边框外，它仍然无法在 IE7 中呈现错误。

Answer 1

我有同样的问题。我使用了这里提到的box-sizing属性：

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

这就是我的样子：

<style>
   .mywidth{ 
     width:100%;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    } 
</style>

Answer 2

输入和textareas默认都有边框

<style>
   .mywidth{ 
     width:100%;
     border:0;
    } 
</style>

将呈现容器中的所有元素。

<强>更新

IE在每个元素上也有左右填充，后面的css适合FF3，FF2，Safari 3，IE6和IE7中容器中的所有元素。

<style>
   .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>

但是，不要忘记您可能需要一个边框，也许还需要填充，以便使字段对用户正常显示。如果您自己设置了边框和填充，那么您将知道在浏览器之间，容器的宽度和您需要为input / textarea元素提供的宽度之间的区别。

Answer 3

@Phil上面有答案。

顺便说一下，使用Firebug确实会显示textarea和input元素的默认边框。因此，使用Firebug可能会有所帮助。

Answer 4

您可以尝试使用此DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 5

添加“padding-right：3px;”到div，所以它读作：

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

因为你已经为div添加了一个边框，它也被视为div的内部空间。

没有doc声明的原因是浏览器不会将页面呈现为过渡性XHTML，而是将旧的html呈现为div等不同的呈现方法。

Answer 6

xhtml严格代码似乎与表单有关。我只是使输入和textareas伸展到99％，这似乎工作。尝试一下。

<input type =“text”/>和<textarea> width </textarea>的问题

6 个答案: