Enforce only one row of floated elements

programming web dev
1

I saw a cool horizontal playlist at the bottom of www.grooveshark.com . It’s made with Flash:

I was wondering if I could do the same with CSS.


<ul>
   <li><img src="1.jpg" /></li>
   <li><img src="2.jpg" /></li>
   <li><img src="3.jpg" /></li>
   <li><img src="4.jpg" /></li>
</ul>

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10em;
    overflow: scroll;
}

ul li {
   float: left;
}

Currently, If there are too many

  • , then I will just have multiple rows of playlist items. Is there anyway to enforce one row of playlist items and trigger a horizontal scrollbar when there are too many
  • to fit on the screen? 
    
WRONG:
[] [] [] [] [] []
[] [] [] []

CORRECT:
[] [] [] [] [] []
<========-------->