使 div 内容水平滚动而不是垂直滚动

Question

我有一个包含一些内容的 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>​

对此有什么想法吗？谢谢你的帮助 ​

Answer 1

这样写：

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

查看http://jsfiddle.net/z5nEQ/3/