css - 在 CSS 中如何让子元素受其父元素的宽度约束？

Question

我在另一个元素中有一个元素。 parent 有一定的规模。我希望 child 的大小完全相同，但同时有填充物。

如果我不知道父级的确切大小，有没有办法让它与父级大小相同并有一个填充？

问题:

http://jsbin.com/odemu3/edit

谢谢。

Answer 1

在支持的浏览器上，将 box-sizing 设置为 border-box(仅限 CSS3)。这会导致浏览器将元素的宽度计算为 content + padding + border + margin(与 CSS1/2 盒模型中的 content-box 相反):

input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

我相信 inputs 默认情况下已经有了这个设置，但这也适用于你想要这样计算其宽度的任何其他子元素。