CSS 非环绕浮动 div

Question

我需要创建一个包含可变数量（浮动？）div 的单行：容器尺寸是固定的，并且应该在需要时添加水平滚动条，而不是换行。

我尝试了以下方法，但它不起作用：它会换行。

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

我尝试了一些东西（内联、表格单元格等），但它们都失败了。

这可以做到吗？如果是这样，怎么办？

Answer 1

使用 display: inline-block 而不是 float 并为容器指定 white-space: nowrap。

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

这里有一个例子： http://jsfiddle.net/D5hUu/3/

Answer 2

内联不起作用，表格单元格应该起作用 - 请参阅我在回答类似问题时所做的jsFiddle：

http: //jsfiddle.net/DxZbV/1/

在 <=ie7 中不起作用...

Answer 3

哎呀，我看错了问题。之前的答案已删除。

---

在你的容器上， white-space: nowrap 然后在元素上 display: inline-block

在这里小提琴： http://jsfiddle.net/HZzrk/1/

Answer 4

编辑：结合 DanielB 和我原来的答案。您需要为 sub 和 ranking 放置 min-width 而不是 width 并将元素设置为 < code>inline-block 容器具有 white-space: nowrap。请参阅：http://jsfiddle.net/5wRXw/3/

编辑 2：出于您的目的，最好消除 ranking 元素上的 overflow 属性。请参阅http://jsfiddle.net/5wRXw/4/

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}