CSS - 输入框宽度设置为100% 与 div 元素重叠

Question

我正在尝试修复一个带有填充和边框的常规输入框，它在内部包含了一个带有填充的div。但是，我希望输入框的宽度为100％，但正如您所见，它会重叠。我该如何解决这个问题？

CSS

#one {
    background:red;
    width:300px;
    padding:5px;
}
#two {
    width:100%;
    border:3px solid blue;
    padding:4px;
}

HTML

<div id="one"><input type="text" value="Test" id="two" /></div>​

- test

Answer 1

将box-sizing: border-box添加到input样式中。否则，宽度将是100％，加上边框和填充。

- Niet the Dark Absol

---

自Firefox 15 Aurora版本开始，要求在CSS属性box-sizing前加上-moz-前缀。详情请见：http://caniuse.com/#search=box-sizing。 - Web_Designer

@Web_Designer 真的吗，他们还没有移除前缀？哇...好吧，我已经使用一个包含前缀的box-sizing类，所以我不需要担心:3 - Niet the Dark Absol