Come impedire che le immagini/i blocchi si avvolgano?

Question

Sto provando ad avere un elenco di immagini visualizzate orizzontalmente. È un po 'come un carousel tranne che invece di utilizzare jQuery e animazioni che avevo appena avuto una barra di scorrimento

<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} 

Il problema qui è che ho per definire la larghezza del tag UL, perché se non lo faccio le immagini andrò alla riga successiva e otterrò un rotolo Y che non voglio.

I non è possibile utilizzare jQuery. Ho provato no-wrap, ma funziona solo per il testo.

Qualche idea?

Answer 1

ul { 
    white-space: nowrap; 
} 

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

Funziona nel mio FF3.6, ma non l'ho provato altrove. Inoltre, il contenuto di ul deve essere tutti elementi in linea (o creati per tale).

Answer 2

La definizione della larghezza è l'unica opzione per impedire il wrapping degli elementi li. Fidati di me, ho usato molte ore con lo stesso problema e sarei sorpreso se qualcuno potesse inventarmi qualcosa di meglio :)

Se non puoi usare JavaScript, forse puoi calcolare la larghezza su il lato server?

Answer 3

Provare a non utilizzare la struttura ul/li e posizionare le immagini una dopo l'altra, che dovrebbe funzionare.

Answer 4

basta sostituire

li {float:left} 

con

li {display:inline}