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; } 

我已经尝试了一些东西(内联,表格单元等),但都失败了。

可以这样做吗? 如果是这样,怎么样?

使用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/

内联将无法正常工作,表格单元格应该工作 – 看到这个jsFiddle我回答了一个类似的问题:

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

不会在<= ie7中工作,但…

哎呀,我误解了这个问题。 先前的答案已删除


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

小提琴: http : //jsfiddle.net/HZzrk/1/

编辑 :合并DanielB的和我原来的答案。 您需要将min-width而不是widthsubranking ,并将元素设置为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; }