html - 如何使元素宽度为 : 100% minus padding?

Question

我有一个 html 输入。

输入有 padding: 5px 10px; 我希望它是父 div 宽度的 100%(流动)。

但是使用 width: 100%; 会导致输入为 100% + 20px 我该如何解决这个问题？

Example

Answer 1

box-sizing: border-box是一种快速、简单的修复方法:

这个 will work in all modern browsers , 和 IE8+。

这是一个演示:http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

现代浏览器不需要浏览器前缀版本(-webkit-box-sizing 等)。