Wie kann ich es so machen, dass es keine neue Zeile zwischen Bildern in diesem HTML gibt?

Question

jsFiddle

Wie Sie oben in der jsFiddle sehen können, nach jedem Bild gibt es einen Zeilenumbruch vor dem nächsten Elemente. Der andere Typ von Element, der zyklische Text, tut dies nicht. Wie kann ich dies ändern, so dass nach jedem Bild keine neue Zeile angezeigt wird? Ich mag es so erscheinen (blaue Kästchen stellen Bilder, rote Kästen den Radsport Textelement darstellen):

Answer 1

li { display: inline-block; } soll es sortieren.

Answer 2

Sie verwenden li Elemente, die standardmäßig dieses Verhalten haben.

Aber für einige Elemente fügen Sie eine Klasse zum li namens text-cycler und die CSS für diese ist

ul.images li.text-cycler { 
    display: block; 
    float: left; 
    width: 96px; 
    height: 96px; 
    margin: 2px; 
} 

der Schwimmer links ist, was diejenigen verursacht einen zum anderen nächsten gestapelt werden. aber die li mit Bildern haben diese Klasse nicht, so dass sie nicht links schweben.