CSS:填充父容器的文本框

Question

我试图让一个<input type="text">(以下简称为"文本框")通过设置其填充父容器width来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病例,我想不惜一切代价避免.这只能是最后的黑客攻击.

Answer 1

你可以用a包围文本框<div>并给它<div> padding: 0 20px.您的问题是100%宽度不包括任何填充或边距值; 这些值被添加到100%宽度的顶部,因此溢出.

Answer 2

使用CSS3,您可以在输入上使用box-sizing属性来标准化他们的盒子模型.这样的东西可以让你添加填充,并有100%的宽度:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

不幸的是,这对IE6/7不起作用,但其余的都很好(兼容性列表),所以如果你需要支持这些浏览器,最好的选择是Davids解决方案.

如果您想阅读更多内容,请查看Chris Coyier撰写的精彩文章.

希望这可以帮助!