css - 水平卷轴充满DIV？ (自动宽度)

Question

我在制作无限期滚动的水平滚动条和自动缩放(宽度)以适应其中的子 div 时遇到了很多麻烦。很难解释，所以我做了一个 fiddle :

http://jsfiddle.net/M2b46/

HTML

<div class="scroller">
    <div class="box-container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

.scroller {
    overflow: scroll;
    border: 1px solid red;
}

.box-container {
    display: -moz-box;
    display: -webkit-box;
}

.box {
    float: left;
    width: 100px;
    height: 100px;
    background: #0088c4;
    margin: 1em;
}

我不想使用 box，因为它看起来有问题。在基于 Webkit 的浏览器上，由于某些原因，蓝色框不可见。在 Firefox 中，它完全符合我的预期。

如有任何帮助，我们将不胜感激!

Answer 1

我使用内联 block 得到了你的解决方案:

.box-container {
    display:block;
    width:100%;
    white-space:nowrap;
}

.box {
    display:inline-block;
    white-space:nowrap;
    width: 100px;
    height: 100px;
    background: #0088c4;
    margin: 1em;

}

demo