css woes - разрешающий контент оставаться горизонтальным в прокручиваемом контейнере

Question

Попытка узнать css и ударить по стене - за этот простой jsfiddle http://jsfiddle.net/t648wvk2/ Я пытаюсь достичь результата, когда у меня есть коллекция divs, выложенная горизонтально в пределах фиксированной ширины контейнер div, который позволяет пользователю прокручивать боковые стороны для просмотра элементов коллекции. Не могу понять, что случилось - любая помощь, которую больше всего ценит!

<div class="container"> 
<div class="list">list1</div> 
<div class="list">list2</div> 
<div class="list">list3</div> 
<div class="list">list4</div> 
<div class="list">list5</div> 
<div class="list">list6</div> 
<div class="list">list7</div> 
<div class="list">list8</div> 
<div class="list">list9</div> 
<div class="list">list10</div> 
<div class="list">list11</div> 
<div class="list">list12</div> 

Answer 1

Используйте следующие CSS:

.list { 
    border:1px solid; 
    height: 3em; 
    width: 100px; 
    margin-left:10px; 
    display: inline-block; 
} 

.container { 
    width: 50%; 
    overflow:scroll; 
    float:left; 
    white-space: nowrap; 
} 

Fiddle Проверить здесь.