Absätze zur Liste machen

[MrMurphy1]

Hallo

Das CSS für eine Flexbox-Lösung könne folgendemaßen aussehen:

@media all {
   p {
      counter-increment: kapnum 1;
   }
   p::before {
      content: counter(kapnum) ". ";
      display: block;
   }
}
@media only screen and (min-width: 700px) {
   p {
      display: flex;
   }
   p::before {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 2rem;
   }
}

Die Werte kannst du natürlich anpassen.

Bei schmalen Fenstern wird die Nummer über dem Text angezeigt. Das ist in der Literatur durchaus üblich.

Das display: block brauchen zudem ältere IE als Nachhilfe für Flexbox, also werden gleich zwei Fliegen mit einer Klappe geschlagen. Und es ist gleichzeitig ein Fallback für Browser die mit Flexbox nix anfangen können. Also gleich ein dritter Vorteil.

Ab einer vorgegebenen Breite (im Beispiel 700px) werden die Zähler dann links vom Text angezeigt.

Bei schmalen Spaltenbreiten sollten diese fest vorgegeben werden.

Bei den flex-Angaben verwende ich aus verschiedenen Gründen lieber die lange Schreibweise. Anfänger kommen mit der Kurzschreibweise immer wieder in unterschiedliche Bredouillen, die sich durch die lange Schreibweise vermeiden lassen.

Gruss

MrMurphy