CSS非包装浮动div

我需要创build一个包含可变数量的（浮动？）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的和我原来的答案。 您需要将min-width而不是width的sub和ranking ，并将元素设置为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; }