CSS水平滚动框

Question

我试图创建一个水平滚动框来创建一个"时间轴"效果...但我似乎无法让它水平滚动,而垂直滚动条显示...想法？

#container{
     width:500px;
     height:250px;
     border:1px solid #cc61b8;
     overflow:auto;
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

<div id="container">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
</div>

Answer 1

你需要一个第二个容器#container,它的宽度全部.container-bits放在一起,这样它们就不会换行:

#container{
     width:500px;
     height:250px;
     border:1px solid #cc61b8;
     overflow:auto;
}
#container2{
     width:10000px;          // just an example
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

<div id="container">
  <div id="container2">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
  </div>
</div>