Input at 100% width overlaps div

I am trying to fix a regular input box with padding, border, inside a div with padding. However, I want the input to have its width to be 100% but as you can see, it overlaps. How do I fix this?

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

---

Add box-sizing: border-box . Otherwise, the width is 100% , PLUS the border and padding.

链接地址: http://www.djcxy.com/p/75522.html

上一篇: 使<object>标记填充整个窗口并用它调整大小

下一篇: 宽度为100％的输入重叠div