css - html - 如何使用自动宽度进行滚动？

Question

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

我想要的是 div 有一个滚动条（仅水平），它的宽度适合父宽度。

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

Answer 1

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

鉴于您提到的填充应用于 100% 宽的元素，问题出在浏览器使用的盒子模型中。如果你应用 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-xCSS 属性。通过将其设置为scroll，当没有要滚动的内容时，您将看到一个禁用的滚动条，因此滚动条始终可见。您的另一个选项是将其设置为auto，如果需要，滚动条将在该位置可见（可能因不同浏览器而异）。

Answer 2

尝试：

div#content {
    width:auto;
    padding:20px;
    overflow-x:auto;
}

看我的演示：http: //jsfiddle.net/HRRsU/3/

Answer 3

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp