水平卷轴装满了DIV？ （自动宽度）

Question

我制作水平滚动条无限期地自动缩放（宽度）以适应其中的儿童div，我遇到了很多麻烦。这很难解释所以我做了一个小提琴：

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

我使用内联块获得了您的解决方案：

.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