使div内容水平滚动而不是垂直滚动
我有一些内容的div,一堆大拇指,我希望它们始终是水平的,任何溢出都会水平滚动。我希望div占据100%的宽度,让大拇指保持居中,这意味着当页面更宽时,它们将保持居中并且不会卡在左侧。我有一个jsfiddle,似乎无法弄清楚为什么它不工作,它总是将溢出推入第二行,而不是允许溢出功能接管。使div内容水平滚动而不是垂直滚动
http://jsfiddle.net/z5nEQ/1/是在这一小提琴和代码是:
CSS:
.box{
width:50px;height:100px;border:1px solid black;float:left;
}
#container{
width:100%;
height:200px;
float:left;
overflow-x:scroll;
}
HTML:
<div align="center" style="width:100%;height:90px;border:1px solid red;">
<div id="container">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box">
</div><div class="box"></div><div class="box"></div><div class="box"></div><div
class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div>
</div>
</div>
对此有何看法?感谢您的帮助
这样写:
.box{
width:50px;
height:100px;
border:1px solid black;
display:inline-block;
*dsplay:inline;/* For IE7*/
*zoom:1;/* For IE7*/
white-space:normal;
}
#container{
width:100%;
height:200px;
float:left;
overflow-x:scroll;
white-space:nowrap;
}
缩放到底是什么? – loriensleafs 2012-03-23 19:14:28
是的,这正是我所希望的,非常感谢,我会在3分钟内接受它,当堆栈溢出会让我... – loriensleafs 2012-03-23 19:17:01
它是IE7的黑客攻击,因为内联块在IE7中无法使用ZOOM显示:内联工作,如display:inline-block – sandeep 2012-03-23 19:19:23
这是因为浮动:离开了,我会说这是对那种情况下正确的行为。 – MarcinJuraszek 2012-03-23 19:07:29