本部横スクロールのみで、私は次のスタイルを持つdiv要素が

Question

を持って働いていない：

height:200px; 
overflow-x:scroll; 
overflow-y:hidden; 
width:682px; 

私は、水平スクロールと、1本のライン上の互いに隣接する要素を必要としています。 要素が内側次のスタイルを持っている：

width:60px; 
padding:10px; 
float:left; 

をしかし、彼らは親のdivの最後に到達したときに、水平スクロールが空白のままながら、彼らは、新しい行に開始します。どのようなアイデアが私は間違ってやって、それを修正する方法は何ですか？

P.Sすべての要素はdivです。

ありがとうございます！ http://jsfiddle.net/pz9AP/

注、実際のスクロールのために責任があるラッパーのdiv：リファレンスを参照してください

Answer 1

。含まれている項目はコンテナ要素内に浮動し、コンテナ要素はラッパー内をスクロールします。

#wrapper { 
    height: 200px; 
    width: 682px; 
    overflow-x:scroll; 
    overflow-y:hidden; 
} 

#container{ 
    width:2000px; 
} 

.item{ 
    width:60px; 
    padding:10px; 
    float:left; 
} 

<div id="wrapper"> 
<div id="container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
    <div class="item">7</div> 
    <div class="item">8</div> 
    <div class="item">9</div> 
    <div class="item">10</div> 
    <div class="item">11</div> 
    <div class="item">12</div> 
</div> 
</div>