CSS: Остановка LI из упаковки в UL

Question

У меня есть список UL, который я преобразовал в столбцы, используя float: left и давая каждому width: 300px. Мне нужно, чтобы эти столбцы располагались по всей странице и чтобы страница прокручивалась влево вправо, если общая ширина столбцов больше, чем страница.

Но на данный момент, когда они достигают ширины страницы, следующий столбец отображает снизу вместо того, чтобы прокручивать страницу слева направо.

Я пробовал использовать overflow: auto и white-space: nowrap, который обычно работает, но не в этом случае.

Вот мой CSS:

#container { 
    overflow: auto; 
    white-space: nowrap; 
    } 
#container ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    overflow: auto; 
    white-space: nowrap; 
    } 
#container ul li { 
    float: left; 
    width: 300px; 
    margin-right: 5px; 
    } 

И HTML:

<div id="container"> 
<ul> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
</ul> 
</div> 

Единственный другой вариант я могу думать использует JavaScript, чтобы заставить ширину на DIV, но я бы предпочел не по возможности.

Answer 1

Замените float: left на display: inline-block для ваших LI.

#container ul li { 
    /*float: left;*/ 
    display: inline-block; 
    width: 300px; 
    margin-right: 5px; 
} 

Демо:http://jsfiddle.net/Eft9J/

Answer 2

Да или просто определить ваш Ли как элементы уровня блока. Ли естественно отображать инлайн-иш, чтобы заставить их плавать, вы должны сказать им следовать бокс-модель:

#container ul li { 
    float: left; 
    display:block; 
    width: 300px; 
    margin-right: 5px; 
    } 

И тогда вам нужно ясно последнего элемента:

#container ul li::last{ 
    clear:both; 
}