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>?

Answer 1

添加box-sizing: border-box到input样式.否则,宽度为100%,加边框和填充.