Отображение изображений в одну строку внутри более короткого div

Question

Как я могу установить все изображения в одну строку и отображать только первые 200 пикселей из них внутри div?
Без нарушения макета или перемещения изображений на следующую строку.
онлайн демо

<div id="thumbsContainer">
   <ul>
    <li><img src="http://img214.imageshack.us/img214/6030/small3.jpg" alt="" /></li>
    <li><img src="http://img263.imageshack.us/img263/5600/small1ga.jpg" alt="" /></li>
    <li><img src="http://img638.imageshack.us/img638/3521/small4j.jpg" alt="" /></li>
    <li><img src="http://img682.imageshack.us/img682/507/small5.jpg" alt="" /></li>
    <li><img src="
http://img96.imageshack.us/img96/6118/small2o.jpg" alt="" /></li>   
   </ul>
  </div>

#thumbsContainer
{
 width:200px;
 overflow:hidden;

}
ul
{
list-style:none;
}
li
{
float:left;
}

Answer 1

Ваша ширина делителя слишком мала - если вы знаете, что размеры и количество изображений заранее, просто установите ширину div, чтобы соответствовать.

Если вам нужен div на 200 пикселей с горизонтальной прокруткой, добавьте «display: inline» к элементам списка и «overflow: auto» и «white-space: nowrap» к div.

Если вы заранее не знаете размеров и / или количеств, но хотите, чтобы список расширялся на одну строку, несмотря ни на что, возможно, вам придется использовать таблицу.

Answer 2

Как установить все изображения в одну строку

Применить display:inline к вашим li с.

и отображать только первые 200px из них внутри div?

Примените width:200px и overflow:hidden к вашему div.