Displaying images in one line inside a shorter div

How can I set all images in one line and display only the first 200px of them inside the div?

Without breaking the layout, or moving images to a next line.

online demo

<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.开发者_如何学Cjpg" alt="" /></li>   
   </ul>
  </div>

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

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

Your div width is to short - if you know you image sizes and quantities up front, just fix the div width to fit.

If you want a 200px div with horizontal scrolling, then add 'display:inline' to your list items, and 'overflow:auto' and 'white-space:nowrap' to the div.

If you don't know sizes and/or quantities up front, but you want the list to expand on a single line no matter what, then you may need to use a table.

How can I set all images in one line

Apply display:inline to your lis.

and display only the first 200px of them inside the div?

Apply width:200px and overflow:hidden to your div.