How to prevent images/blocks from wrapping?

Question

I'm trying to have a list of images displayed horizontaly. It's kind of like a carousel except instead of using jquery and animations I'd just have a scrollbar

<div class="playlist-wrapper">
  <ul class="playlist">
    <li> <img src='http://blah' /></li>
    <li> <img src='http://blah' /></li>
    <li> <img src='http://blah' /></li>
    <li> <img src='http://blah' /></li>
  </ul>
</div>

.playlist-wrapper{width: 500px; overflow-x:scroll}
ul{width: 10000px;}
li{float:left}

The problem here is that I have to define the width of the UL tag because if I don't the images are going to go the next line and I'm going to get an Y scroll that I don't want.

I can't use jQuery. I tried no-wrap, but this only works for text.

Any idea?

Answer 1

Defining the width is the only option to prevent the li elements from wrapping. Trust me, I've used a lot of hours with the same problem and I'd be surprised if anyone can come up with anything better :)

If you can't use JavaScript, perhaps you can calculate the width on the server side?

Answer 2

ul {
  white-space: nowrap;
}

li {
  display: inline;
  /* or, for 'blockness': */
  display: inline-block;
}

Works in my FF3.6, but haven't tried it elsewhere. Also, the content of the ul must all be inline elements (or made to such).

Answer 3

Try not to use the ul/li structure at all and just place images one after the other, that should work.

Answer 4

Just replace

li {float:left}

with

li {display:inline}