CSS-Quicktipp: Tabs in HTML

Tabs in HTML

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-3456789

Per CSS sind nur zwei Angaben notwendig:

.telmail {
display: inline-block;
width: 6em;
}

 

2 Kommentare zu “CSS-Quicktipp: Tabs in HTML”

  1. Monika

    Das habe ich schon lange gesucht.
    Super!
    Vielen Dank und liebe Grüsse
    Monika

    Antworten
    • Florence

      freut mich, wenns nutzt 🙂

      Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>