我有一个div有一些内容,一堆拇指,我希望它们总是水平的,任何溢出都会水平滚动.我希望div占据100％的宽度,保持拇指成为一组中心,这意味着当页面更宽时,它们保持居中并且不会粘在左侧.我有一个jsfiddle,似乎无法弄清楚为什么它不工作,它总是将溢出推入第二行,而不是允许溢出功能接管.
http://jsfiddle.net/z5nEQ/1/那是小提琴和代码：
CSS：
#wrapper{
width:100%;
height:90px;
border:1px solid red;
}
.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" id="wrapper">
<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; }
