如何使子元素受CSS中父元素宽度的约束？

Question

我在另一个元素中有一个元素.父母有一定的规模.我希望孩子的大小完全相同,但同时有一个填充.

如果我不知道父级的确切大小,是否有任何方法可以使其与父级具有相同的大小并具有填充？

问题:

http://jsbin.com/odemu3/edit

谢谢.

Answer 1

在支持的浏览器上,设置box-sizing为border-box(仅限CSS3).这会导致浏览器将元素的宽度计算为内容+填充+边框+边距(content-box与CSS1/2框模型中的相反):

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

我相信默认情况下输入已经具有此设置,但是这也适用于您想要计算宽度的任何其他子元素.