我需要创建一个单行包含一个可变量的(浮动?)divs:容器维度是固定的,它应该在需要时添加一个水平滚动条,从不包装。
我尝试以下,但它不工作:它换行。
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/