<!DOCTYPE html> <html lang="de"> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>

ul {

 list-style-type: none;
 width: 30em;

}

li h3 {

 font: bold 1.2em/1.5 Helvetica, Verdana, sans-serif;

}

li img {

 float: left;
 margin: 0 15px 0 0;
 width: 5em;

}

li p {

 font: 100 0.75em/1.5 Georgia, Times New Roman, serif;

}

li {

 padding: 10px;
 overflow: auto;

}

li:hover {

 background: #F1F3F4;
 cursor: pointer;

}

 </style>
 <title>Listen mit CSS gestalten - 3</title>

</head> <body>

Inhaltsverzeichnis

Beispiel: Listen mit Kindelementen

<img src="//wiki.selfhtml.org/images/f/f1/Fr%C3%BChling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
Frühling

Endlich wird es wieder ein bisschen sonniger und wärmer. Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
<img src="//wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
Sommer

Abends bleibt es länger hell und man kann draußen sitzen und die Abkühlung von der Tageshitze genießen.
<img src="//wiki.selfhtml.org/images/5/59/Herbst.png" alt="Bild eines Ahorns im Herbst, Quelle Wikipedia">
Herbst

Hier kommt noch Text hin. ein ganzer Satz oder vielleicht auch mehr. In die zweite Zeile könnte auch noch etwas.
<img src="//wiki.selfhtml.org/images/a/a7/Winter.png" alt="Schneelandschaft, Quelle Wikipedia">
Winter

Hier kommt noch Text hin. ein ganzer Satz oder vielleicht auch mehr. In die zweite Zeile könnte auch noch etwas.

</body>