我如何保持浮動的孩子divs包裝？

Question

我試圖做一個旋轉木馬類型控件，允許用戶選擇在許多div元素之一內的單選按鈕。這個想法是有20個左右150像素的div包含單選按鈕。我不想讓這20個div在到達容器的右側時進行包裝。我試圖設置容器溢出隱藏，但沒有奏效。基本的html佈局是

<div class="scheduler"> 
    <div class="scheduler-inner"> 
     <div class="item">...</div> 
     <div class="item">...</div> 
     <div class="item">...</div> 
     <div class="item">...</div> 
     ...<div class="item">...</div> 
    </div> 
    <a class="scheduler">...</a> 
    <a class="scheduler">...</a> 
</div> 

我真的只是在尋找一些CSS指導。我不想在.scheduler-inner上有滾動條，我將使用javascript將點擊錨點時向左或向右移動.item。 .scheduler-inner應該怎樣樣式？我有

.scheduler-inner { overflow:hidden; } 
.scheduler-inner > div { float:left; width:10em; } 

但他們儘快包裝，因爲它擊中的.scheduler-inner邊緣。

Answer 1

你需要的是不浮，但風格white-space: nowrap;

應用的容器上的NOWRAP和設置您的條款顯示在線。參考下面的jsfiddle。

這是一個jsfiddle：http://jsfiddle.net/of5dmjux/