CSS - 100% 宽度的输入与 div 重叠

【问题标题】：CSS - Input at 100% width overlaps divCSS - 100% 宽度的输入与 div 重叠
【发布时间】：2012-06-16 00:07:29
【问题描述】：

我正在尝试在带有填充的 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>

【问题讨论】：

标签： html css

【解决方案1】：

将box-sizing: border-box 添加到input 样式。否则，宽度为100%，加上边框和内边距。

【讨论】：