css - html - 如何制作宽度为自动的滚动条？

Question

我有一个包含很多内容的 div，并试图将宽度设置为父元素的 100%。这个 div 也使用了填充，所以我想我应该将宽度设置为自动。 但由于某种原因，它总是扩展到超过父宽度。我什至将溢出设置为滚动。

我想要的是 div 有一个滚动条(只有水平的)，并且它的宽度适合父宽度。

有谁知道我该如何解决这个问题？

Answer 1

其父级的 100% 宽度，带有填充:

鉴于您提到的填充应用于 100% 宽的元素，问题出在 box model 内浏览器使用。如果应用 100% 宽度和一些填充，元素将得到 width + padding 作为其完整宽度，从而导致它变得太大。有几种方法可以解决这个问题:

1. CSS3 引入了一个名为 box-sizing 的新属性，通过将其设置为 border-box，填充将添加到元素的给定宽度内，而不是添加到导致元素变得“太大”的宽度。 (请注意旧版浏览器不支持)。

2. 我相信可以使用 left: 0; right: 0; 而不是使用 width: 100%;。在这种情况下，您可以添加填充，而元素不会变宽。

实践中的第二种选择:

<!-- The markup -->
<div class="parent">
    <div class="child">Child</div>
</div>​

/* The CSS */
.parent {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #666;
}

.child {
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #888;
}
​

这是第二个选项的工作示例:http://jsfiddle.net/mGLRD/

水平滚动条:

要获得水平滚动条，您必须查看 overflow-x CSS 属性。通过将其设置为 scroll，当没有内容可滚动时，您将看到一个禁用的滚动条，因此滚动条始终可见。您的另一个选择是将其设置为 auto，滚动条将在需要时可见(可能因浏览器而异)。