Definition Lists (DLs) bzw. description lists (siehe Matthias Kommentar) sind ein kaum genutztes HTML-Element, das ich aber ganz gerne mag. Ihre semantische Aufgabe ist es, Definitionen zu einem Schlagwort aufzulisten. Spinnt man das etwas weiter macht es das zum einzigen geeigneten Element, wenn man Eigenschaften einer Sache auflisten will. Zum Beispiel die Eigenschaften eines Prozessors, wie Prozessortakt und die Anzahl der Kerne.
DLs sind ein <dl>
Element, in dem dann mindestens ein <dt>
ist - das zu definierende Ding - dem ein oder mehrere <dd>
folgen - die Definitionen.
Im Browser werden DLs so normalerweise angezeigt:
DT
DD
DD
...
Die <dd>
stehen also rechts eingerückt (Firefox löst das mit margin-left: 40px
) unter dem Schlagwort. Hier nochmal als Fiddle:
Das ist nicht immer ideal. Diese Art der Darstellung wirkt schlicht unfertig und sie nimmt viel vertikalen Platz weg. Entsprechend gibt es seit Jahren ein paar wenige (denn wie erwähnt, das Element wird selten benutzt) Artikel, wie man DL anders darstellen kann.
Eine hübsche Lösung bietet sich mit CSSs relativ neuem grid
-Layout an. Eine sinnvolle Darstellung für DLs ist eine tabellarische: Links die Schlagworte, rechts die Definitionen. Das war bisher aber nicht ganz einfach, wenn man weiterhin die mehreren <dd>
unter einem <dt>
unterstützen will, und gleichzeitig float
zu vermeiden wünscht.
Mit grid
ist es nun ganz einfach:
dl {
display: grid;
grid-template-columns: 50% 50%;
}
dt {
grid-column-start: 1;
}
.specs dd {
grid-column-start: 2;
margin-left: 0;
padding-left: 1em;
}
Das sieht dann so aus:
Da fehlt dann nur noch etwas übliches Tabellenstyling für ein gutes Ergebnis.
Übrigens: Support für grid
ist mit den letzten Browserversionen in alle Mainstream-Browser gerutscht, wobei IE wie Edge noch ein Prefix benötigt und nicht die aktuelle Version der Spezifikation unterstützt.
onli blogging am : Am Limit von CSS, trotz Flexbox und Grid
Vorschau anzeigen