TYPO3@lisardo

Die Formatierung von Definitionslisten mit CSS finde ich immer etwas knifflig, vor allem, wenn sie benutzt werden, um Formulare zu gestalten. Ziel ist hier, den Definition-Term (dt) mit den Labels links floaten zu lassen, und Definition-Data (dd) mit den Feldinhalten direkt daneben zu setzen. Das geht im Allgemeinen so lange gut, bis eines der beiden Elemente mehrzeilig wird: dann stehen beide Elemente plötzlich nicht mehr in einer Zeile. 

Das Problem liegt darin, dass dt und dd nicht wie üblich mit einem eigenen Container umgeben werden können, der für das Clearing benutzt werden kann. Der Trick liegt letztlich darin, mit Hilfe von »:after« ein Clearing nach dd zu erzwingen:

Damit erreicht man eine saubere Ausrichtung der beiden Elemente auf eine Zeile, wie das folgende Beispiel zeigt.

Achtung! Das Beispiel enthält einen kleinen Trick: die Linien zur Abgrenzung wurden oberhalb von dt und dd definiert (border-top), unterhalb (also border-bottom) geht nicht! Die floatenden dt-Elemente sind nämlich wie alle floatenden Boxen prinzipiell nur so hoch wie ihr Inhalt, was zur Konsequenz hat, dass in der dt-Spalte eine untere Linie immer direkt unter dem Text steht.

Dazu fällt mir nur ein, in diesem Fall eben border-bottom (und background) nicht zu verwenden.