CSS for carousel of elements (container has fixed width, scrollable area has infinite width)

What CSS is required to make it so a viewport can have an infinitely wide list inside of it?

开发者_Python百科<div class='viewport'>
  <ul class='scrollable-content'>
    <li></li>
    <li></li>
    ...
  </ul>
</div>

This doesn't seem like it should require javascript. It's gotta be something simple, just can't wrap my mind around it at the moment.

Something like this? http://jsfiddle.net/vJgtM/

This might work also (http://jsfiddle.net/vJgtM/7/):

CSS:

div.viewport {
    width: 500px;
    overflow: auto;
}

div.viewport ul {
    width: 100%;
     white-space: nowrap;
}

div.viewport ul li {
    display: inline;
}