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>