Wie kann verhindert werden, dass Bilder/Blöcke umgebrochen werden?

Question

Ich versuche, eine Liste von Bildern horizontal angezeigt zu haben. Es ist ein bisschen wie ein carousel außer statt mit Jquery und Animationen Ich hatte gerade eine Scrollbar hier haben

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

Das Problem ist, dass ich die Breite des UL-Tag zu definieren, denn wenn ich nicht die Bilder gehen wir in die nächste Zeile und ich bekomme eine Y-Rolle, die ich nicht will.

I kann nicht verwenden Sie jQuery. Ich habe versucht, keine Zeilenumbrüche, aber das funktioniert nur für Text.

Irgendeine Idee?

Answer 1

ul { 
    white-space: nowrap; 
} 

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

Funktioniert in meinem FF3.6, aber habe es anderswo nicht versucht. Außerdem muss der Inhalt der ul alle Inline-Elemente sein (oder zu solchen gemacht werden).

Answer 2

Das Festlegen der Breite ist die einzige Option, die verhindert, dass die li-Elemente umgebrochen werden. Vertrauen Sie mir, ich habe eine Menge Stunden mit dem gleichen Problem verbracht und ich wäre überrascht, wenn jemand etwas besseres finden könnte :)

Wenn Sie JavaScript nicht verwenden können, können Sie vielleicht die Breite auf berechnen die Serverseite?

Answer 3

Versuchen Sie, die ul/li Struktur überhaupt nicht zu verwenden und nur Bilder hintereinander zu platzieren, das sollte funktionieren.

Answer 4

Ersetzen Sie einfach

li {float:left} 

mit

li {display:inline}