html - 输入形式覆盖填充？

Question

我得到一个输入表单，它在我的 .content 类中应该是 100% 宽，并且在该类中有 20px 的填充，在该输入表单的左侧有 8px 的填充。问题是输入表单中的左侧填充会覆盖右侧的 .content 类中的填充。

JS: http://jsfiddle.net/8AsxX/1/

CSS:

.content {
    min-height: 100%;
    background-color: #000;
    padding: 20px;!important
 }
input.text.big {
    background-color: #ffffff;
    height: 30px;
    width: 100%;
    border: solid 1px #cccccc;
    padding-left: 8px;
    color: #333;
 }

HTML:

<div class="content">
    <input class="text big" name="url" type="url" placeholder="Example: http://www.facebook.com/FANPAGE-URL" required="">
</div>

Answer 1

整个 width 的计算方式类似于输入元素的 100% + 8px，因此它与 padding:20px 重叠父 div。您可以使用 calc 修复它对于输入:

width: calc(100% - 8px);

Example