html - 如何防止填充的子元素溢出其父元素？

Question

从这个例子可以看出，input似乎“溢出”了它的父级div。我想在input不使其溢出其父级的情况下添加填充。

我想知道每个浏览器（包括 IE、Firefox、Chrome 等）的最佳解决方案/解决方法。

score 25 · Accepted Answer

你可以看到这个答案，但如果你不喜欢它，你可以box-sizing像这样使用 CSS3 属性：

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

score 2 · Accepted Answer

填充会增加对象的宽度。一种选择是从输入中删除左/右填充并仅使用文本缩进，尽管这会删除右填充。

.inside{
    background: blue;
    border: none;
    padding-bottom: 10px;
    padding-top: 10px;
    text-indent: 10px;
    width: 100%;
}

或者，您可以使用百分比，并从宽度中减去该值，而不是使用硬编码的像素宽度作为填充：

.inside{
    padding: 3%;
    width: 94%;
}

score 0 · Accepted Answer

看起来输入在 div 内，但位于左上角。因为输入占据了 div 的 100% 的宽度，所以它掩盖了 div 的红色背景。div 较长，因此它伸出底部，使输入看起来像是在顶部。请执行下列操作：

将填充应用于外部 div 的 CSS 而不是输入框。
如果需要，您可以对输入应用边距，但我认为填充包含的 div 更好。
- 使输入框的宽度小于 div (<100%)

score 0 · Accepted Answer

0

不要将内部 div 的宽度指定为100%. div 将自动适应其父容器的宽度。演示

于 2012-06-09T23:39:16.377 回答

4 回答 4