CSS-Quicktipp: Tabs in HTML
Geschrieben am:
Im Textverarbeitungsprogramm Word erreicht man durch Tabs, dass einzelne Textteile untereinander stehen. Gerade hatte ich ein ähnliches Problem bei einer Webseite: Auf einer Webseite gab es die Texte "E-Mail: emailadresse@example.com" und darunter "Telefon: 012-3456789"; wobei die Telefonnummer und die E-Mail-Adresse exakt untereinander stehen sollten. In Word ist das ein klassischer Fall für Tabs, in HTML gibts es allerdings so etwas wie Tabs nicht. Wie lässt sich trotzdem die gewünschte Darstellung erreichen? Wenn man mehrere solcher Zuordnungen hat, dann ist das ein klarer Fall für eine Tabelle - aber nur für zwei Zeilen schien mir das zu aufwändig.
Die Lösung, die mir dann einfiel, ist ganz einfach: Man verwendet die Angabe display: inline-block für den Text "E-Mail" und den Text "Telefon". Dann kann man beiden dieselbe Breite zuweisen und die dahinter stehenden Angaben sind automatisch exakt untereinander.
<span class="telmail">E-Mail:</span>emailadresse@example.com<br>
<span class="telmail">Telefon:</span>012-3456789Per CSS sind nur zwei Angaben notwendig:
.telmail {
display: inline-block;
width: 6em;
}