Question

我有一个输入表单，在我的.content类中应该是100％宽，并且在该类中有20px填充，在该输入表单左边有8px填充。问题是输入表单内的左边距填充了右边的.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>

Answer 1

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

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

Answer 2

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

进行修复

{{1}}

calc

Answer 3

我认为行为是设计。您可以通过增加容器的右边距来补偿它：

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

输入表单覆盖填充？

3 个答案: