CSS：填充父容器的文本框

我想让一个< input type =“text”> (以下称为“文本框”)通过将其宽度设置为100％来填充父容器。这工作，直到我给文本框一个填充。然后将其添加到内容宽度和输入字段溢出。请注意，在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 – 我特别不想添加没有语义功能的虚拟元素。这是一个典型的divitis的情况，我想不惜一切代价。这只能是最后的手段。

解决方法

您可以使用< div>并赋予< div> padding：0 20px。您的问题是，100％宽度不包括任何填充或边距值;这些值被添加在100％宽度的顶部，因此溢出。

原文地址：https://www.jb51.cc/css/221278.html