CSS：在頁面上展開一行寬

Question

我想要一組div在一行中對齊，超過頁面寬度並滾動水平。

|---- page ----| 

[ ][ ][ ][ ][ ][ ][ ][ ] 
     <---->scroll 

我已經嘗試了不同的選項，如浮動離開，在線顯示等，但我所有的臨牀試驗中的東西，在第二行雲與頁面的寬度結束：

|---- page ----| 

[ ][ ][ ][ ][ ][ ] 
[ ][ ] 

這裏一個jsfiddle

CSS：

.container { 
    width: auto; 
} 
.foo { 
    background-color:red; 
    width: 20px; 
    height:20px; 
    margin: 2px; 
    float: left; 
} 

HTML：

<div class="container"> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
</div> 

Answer 1

這將做的工作適合你：

.container { 
    white-space: nowrap; 
} 
.foo { 
    display: inline-block; 
    background-color:red; 
    width: 20px; 
    height:20px; 
    margin: 2px; 
    zoom: 1;/for less than ie8 support 
    *display: inline;/for less than ie8 support 
} 

演示：http://jsfiddle.net/PexbZ/1/