How to prevent images/blocks from wrapping?

css, html

Solution

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).

Problem

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?

Original source