Formatieren mit css

[Gunnar Bittersmann]

@@Pit

gibt es eine einfache Möglichkeit, bei einer mehrzeiligen Meldung den Text genau untereinander (quasi wie in einer Tabelle) zu plazieren?

Mehrere:

1. Du gibst den Boxen links padding und positionierst die Icons absolut in den Freiraum. Dazu müssen die Boxen selbst position: relativ sein.

   Das hat den Vorteil, dass die Texte in den verschiedenen Boxen auch bei unterschiedlich breiten Icons links bündig sind. Und das funktioniert auch, wenn du nicht nur einfachen Text als Elementinhalt hast, sondern weitere HTML-Elemente.

2. Du verwendest CSS Grid für die Boxen: display: grid; grid-template-columns: 1.5em 1fr

   Dann musst du für die Icons nichts weiter angeben – außer die verticale Positionierung korrigieren, da die Icons jetzt etwas höher sitzen. Problematisch wird’s, wenn du nicht nur einfachen Text als Elementinhalt hast, sondern weitere HTML-Elemente.

Derzeit helfe ich mir mit entsprechend vielen   aus, aber dafür sind die ja eigentlich nicht gedacht.

Buh.

Außerdem missbrauchst du <i>-Elemente für Icons, aber dafür sind die nicht gedacht.

LLAP 🖖