2010-02-22 1 views
6

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 habenWie kann verhindert werden, dass Bilder/Blöcke umgebrochen werden?

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

+0

werden Sie dynamisch die Bilder laden? Sind sie alle gleich groß oder unterschiedlich groß? – Pbirkoff

+0

@pbirkoff Ich habe die Kontrolle über die Größe und _could_ setze es dynamisch beim Laden, aber ich würde lieber nicht – marcgg

Antwort

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

+0

nach dem Test musste ich eigentlich den Float entfernen (habe es vergessen). Das scheint zu funktionieren! – marcgg

+0

Das ist meine Testdatei: http://jsbin.com/ikove. Wenn Sie "float: left" immer noch in Ihrem Stylesheet haben, müssen Sie es entfernen. – Boldewyn

+0

Übrigens: Diese Lösung funktioniert nicht, wenn Sie keinen expliziten Wert für die Breite der ul setzen. * Das * ist etwas, worüber ich immer noch Kopfschmerzen habe, wenn ich daran denke. – Boldewyn

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?

+0

Was ist, wenn ich nicht die gesamte ul/li-Struktur verwendet und etwas anderes, denken Sie, es wäre ein Weg drum herum ? – marcgg

+0

Nicht zu meinem Wissen, fürchte ich. Ich hoffe aber, dass mich jemand bei diesem Thema verraten wird. –

+0

Ich kann die Breite auf der Serverseite berechnen, aber ich hatte auf eine elegantere Lösung gehofft ^^ – marcgg

0

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

+0

Thx für die Lösung. Das funktioniert, aber ich brauche die Wrapper, also ist das nicht gut für mich – marcgg

2

Ersetzen Sie einfach

li {float:left} 

mit

li {display:inline} 
Verwandte Themen