Css 满是div的水平滚动条？（自动宽度）

我在制作一个水平滚动条时遇到了很多麻烦，这个滚动条可以无限期地滚动，并且可以自动调整宽度以适应里面的孩子们的div。这很难解释，所以我做了个小动作：

HTML

我不想用这个盒子，因为它看起来有马车。在基于Webkit的浏览器上，由于某些原因，蓝色框不可见。在Firefox中，它完全按照我的预期工作

---

任何帮助都将不胜感激

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

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

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

}

---

添加相对于“.box”的位置使其在chrome中可见：

.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-container {
    display:block;
    width:100%;
    white-space:nowrap;
}

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

}