HTML-Liste ist nicht vertikal ausgerichtet, wenn schwebende Bilder verwenden

Question

Ich habe eine Liste mit Titeln, Text und Bildern, und manchmal, wenn es nicht genug Text gibt, beginnen meine Listen zu brechen, dh. Die Liste beginnt sich selbst zu verschachteln.

<ul> 
    <li><img style="float:left"><h3>title</h3> ... some text here</li> 
    <li><img style="float:left"><h3>title</h3> ... some text here</li> 
    <li><img style="float:left"><h3>title</h3> ... some text here</li> 
</ul> 

Ich habe hier ein Beispiel:

http://jsfiddle.net/2z6Zn/246/

img { 
 
    float: left; 
 
    margin-right: 0.1em; 
 
}

<ul> 
 
    <li> 
 
    <h3>photo</h3> 
 
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo 
 
    </li> 
 
    <li> 
 
    <h3>photo</h3> 
 
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo 
 
    </li> 
 
    <li> 
 
    <h3>photo</h3> 
 
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo 
 
    </li> 
 
</ul>

Was ist der beste Weg, um dieses Problem beheben?

Answer 1

Der Teil, den Sie vermissen, ist die float s zu löschen. Verwenden Sie diese:

li:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

und jetzt haben Sie die "Nesting" entfernt.

Beachten Sie, dass bei der Verwendung von schwimmenden Container, sollten Sie immer clear sie vor dem nächsten Behälter, der dadurch einen neuen Kontext Block Formatierung Erstellen folgt wie sie genannt wird. Andernfalls sehen Sie unvorhersehbares Verhalten.

Überarbeitete Demo unter:

img { 
 
    float: left; 
 
    margin-right: 0.1em; 
 
} 
 
li:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<ul> 
 
<li> 
 
<h3>photo</h3> 
 
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo 
 
</li> 
 
<li> 
 
<h3>photo</h3> 
 
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo 
 
</li> 
 
<li> 
 
<h3>photo</h3> 
 
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo 
 
</li> 
 
</ul>

Answer 2

Entfernen Sie die CSS Sie in jSfiddle angewendet haben d.h

img { 
    float: left; 
    margin-right: 0.1em; 
} 

Stattdessen fügen Sie einfach CSS folgende

Answer 3

/* This will make every element inside Li align in a line */ 

li * { 
    display: inline-block; 
} 
/* have specifically gave h3 element block property so that it can be in a separate line and serve as a heading */ 
    li h3 { 
    display: block; 
    } 

Arbeits Geige - http://jsfiddle.net/2z6Zn/247/