css - 防止 float 元素环绕(改为显示滚动条)

Question

如何使 div 标签的元素不环绕，而是延伸到页面上的可用空间之外？

例如，我有:

<div class="container">
<div class="row">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
    <div class="child">19</div>
    <div class="child">20</div>
</div>
<div class="row">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
    <div class="child">19</div>
    <div class="child">20</div>
</div>
</div>​

CSS:

.container{
    overflow: scroll;
    width: 100%;
}
.row {
    clear: both;
}

实际输出:

期望的输出:

http://jsfiddle.net/kcW6w/

我希望容器元素的宽度为 100%，但要有一个滚动条，这样每一行就不会环绕。

我发现如果我为 .row 元素设置一个大的、任意的宽度，它就可以正常工作。除了设置任意宽度之外，还有另一种方法可以做到这一点吗？我不喜欢使用硬编码宽度，因为宽度会动态变化。

.row {
    clear: both;
    width: 2000px;
}

http://jsfiddle.net/kcW6w/1/

我还注意到 Safari 上的滚动条有些不一致，可能是因为我设置了任意值。

Mac OS X 上的 Chrome 中的滚动条不一致(一直向右滚动):

Safari 甚至不显示滚动条。

Answer 1

你可以试试这个 - DEMO

CSS

.container {
    overflow: scroll;
}

.row {
    white-space: nowrap;
    font-size: 0;
}

.child {
    font-size: 16px;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    background-color: #ccc;
    display: inline-block;
}