输入表单覆盖填充？答案

【问题标题】：Input form overrides padding?输入表单覆盖填充？
【发布时间】：2014-06-02 23:07:28
【问题描述】：

我的 .content 类内部有一个输入表单，它应该是 100% 宽，并且该类内部有 20 像素的填充，该输入表单的左侧有 8 像素的填充。问题是输入表单中的左侧填充覆盖了 .content 类中右侧的填充。

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>

【问题讨论】：

标签： html css

【解决方案1】：

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

width: calc(100% - 8px);

Example

【讨论】：

完美，我不知道 calc 选项，感谢您的帮助！如果允许，我会在 2 分钟内标记它。

【解决方案2】：

盒子大小应该可以解决问题。

.content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

【讨论】：

【解决方案3】：

我相信这种行为是设计的。您可以通过增加容器的右填充来弥补它：

.content {
    min-height: 100%;
    background-color: #000;
    padding: 20px 28px 20px 20px;
 }

【讨论】：