防止浮动元素缠绕（改为显示滚动条）

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;
}