css - 防止浮动元素环绕（改为显示滚动条）

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

You can try this - 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;
}