html Navigationsleiste zentrieren?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
17.10.2020, 10:26

Eine Tabelle für die Navigation zu verwenden, halte ich für keine gute Lösung. Die Navigationsitems stellen doch nicht wirklich typische tabellarischen Daten dar. Und für eine mobile Darstellung lassen sich die Zellen später nicht so einfach untereinander klappen (o.ä.).

Eine leichte Lösung konnte folgendermaßen aussehen:

HTML:

<nav class="top-navigation">
  <ul>
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
  </ul>
</nav>

CSS:

.top-navigation ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

.top-navigation li {
  margin: 0 5px;
}

Das Navigationselement wird mit einem Klassenselektor versehen, welcher ein Flexlayout verwendet. So werden die einzelnen Listeneinträge horizontal nebeneinander positioniert. Mit justify-content werden sie in der Auflistung horizontal zentriert angeordnet.
busspuss99
16.10.2020, 20:49

Musst du das unbedingt mir altbackenem HTML machen? Lies dich unbedingt in Bootstrap ein, ist heute Standard und erleichtert die Arbeit extrem, besonders wenn es dann mal um Kompatibiltät mit Handies gehen soll:

https://getbootstrap.com/docs/4.0/components/navbar/

Ansonsten kannst du die Zellen auch nicht absolut sondern relativ darstellen, via:

<td width="x%"></td>

und bei x% trägst du dann die Breite ein die die Zellen in der NavLeiste einnehmen sollen.
regex9  17.10.2020, 10:05

Die Nutzung des width-Attributs wäre eine altbackene Lösung, denn das Attribut wurde schon für HTML 4 (also ungefähr 20 Jahren) als deprecated gekennzeichnet. Die bessere Lösung würde daher die Nutzung von CSS vorsehen.

Ob sich Bootstrap lohnt (denn nein, es ist nicht Standard), sollte an der Projektgröße bemessen werden.

1