CSS：填充父容器的文本框
我试图通过将其宽度设置为100％来让<input type =" text">`(此后称为文本框)填充父容器。在我给文本框添加填充之前，此方法一直有效。然后将其添加到内容宽度，并且输入字段溢出。请注意，在Firefox中，只有在将内容呈现为符合标准的情况下才会发生这种情况。在怪癖模式下，似乎可以使用另一种盒子模型。
这是在所有现代浏览器中重现此行为的最小代码。
#x {
background: salmon;
padding: 1em;
}
#y, input {
background: red;
padding: 0 20px;
width: 100%;
}
<div id="x"> <div id="y">x</div> <input type="text"/> </div>
我的问题：如何使文本框适合容器？
注意：对于<div id =" y">，这很简单：只需设置width：auto`。但是，如果我尝试对文本框执行此操作，则效果会有所不同，并且文本框会将其默认行数作为宽度(即使我为文本框设置了" display：block")。
/编辑：大卫的解决方案当然可以工作。但是，我不想修改HTML？我尤其不想添加没有语义功能的伪元素。我想不惜一切代价避免这是典型的神经炎。这只能是最后的手段。
解决方案
回答
我相信我们可以以负边际数抵消溢价。 IE
margin: -1em;
回答
我们可以用<div>包围文本框，并给其<div>padding：0 20px。问题是100％的宽度不包含任何填充或者边距值。这些值将被添加到100％宽度的顶部，从而导致溢出。
回答
此行为是由盒模型的不同解释引起的。正确的盒子模型指出宽度仅适用于内容，并在其上加上填充和边距。因此，我们得到的是100％，外加20px左右填充，等于总宽度的100％+ 40px。原始的IE盒模型(也称为"怪癖"模式)在宽度中包括填充和边距。因此，在这种情况下，我们内容的宽度将为100％40px。这就是为什么我们看到两种不同的行为的原因。据我所知，对此没有解决方案，但是可以通过将宽度设置为98％，将每一边的填充设置为1％来解决。
回答
@Domenic这不起作用。 width auto不会执行该元素的默认行为，因为width的初始值为auto(请参见第164页，级联样式表2级修订1规范)。分配类型块的显示也不起作用，这只是告诉浏览器在显示元素时使用块框，并且没有分配默认行为，即像div那样占用尽可能多的空间(请参见第121页，级联样式工作表2级修订1规范)。该行为是由可视用户代理而不是CSS或者HTML定义处理的。
回答
由于Box-Modell的定义和实现方式，我认为没有针对此问题的纯CSS解决方案。 (除了Matthew所描述的以外：也将百分比用于填充，例如宽度：94％；填充：0 3％；)
但是，我们可以构建一些Javascript代码来动态计算页面加载时的宽度... hm，当然，每次调整浏览器窗口的大小时，也必须更新该值。
我做过的一些有趣的测试副产品：Firefox确实将输入字段的宽度设置为100％，如果另外将宽度设置为100％，则还将max-width设置为100％。不过，这在Opera 9.5或者IE 7中不起作用(尚未测试旧版本)。
回答
不幸的是，这对于纯CSS是不可能的。 HTML或者Javascript修改对于任何非平凡但受约束的UI行为都是必需的。 CSS3列在这方面会有所帮助，但在像我们这样的场景中则无济于事。
大卫的解决方案是最干净的。这并不是真正的divitis-我们不必不必要地添加一堆div，或者给它们一个类名，例如" p"和" h1"。它具有特定的用途，在这种情况下，它的优点是它也是可扩展的解决方案-例如然后，我们可以随时添加圆角，而无需进一步添加任何内容。可访问性也不受影响，因为它们是空div。
首先，这是我实现所有文本框的方式：
<div class="textbox" id="username">
<div class="before"></div>
<div class="during">
<input type="text" value="" />
</div>
<div class="after"></div>
</div>
然后，我们可以自由使用CSS添加圆角，添加填充(如情况)等，但是我们也不必-我们可以自由地完全隐藏那些侧边div，而只有一个常规的输入文本框。
其他解决方案是使用表格，例如亚马逊使用表格来获得灵活但受限的布局，或者使用Javascript调整大小并根据窗口调整大小来更新它们，例如Google文档，地图等都可以做到这一点。
无论如何，我的两分钱：在这种情况下，不要让理想主义妨碍实用性。 :) David的解决方案可以工作，并且几乎不会弄乱HTML(实际上，使用语义类名，如" before"和" after"仍然很干净)。
回答
默认的填充和边框将阻止文本框真正变为100％，因此首先必须将它们设置为0：
input {
background: red;
padding: 0;
width: 100%;
border: 0; //use 0 instead of "none" for ie7
}
然后，在文本框周围的div中放置边框以及要填充的边框或者边距：
.text-box {
padding: 0 20px;
border: solid 1px #000000;
}
<body>
<div id="x">
<div id="y">x</div>
<div class="text-box"><input type="text"/></div>
</div>
</body>
这应该允许文本框可扩展，并且不需要JavaScript即可获得所需的确切大小。
