Wie rechtfertige ich ein horizontales Menü in HTML-CSS?

Ein horizontales Menü in HTML CSS ausrichten: Der ultimative Leitfaden

Eine horizontale Menüleiste auszurichten ist eine scheinbar triviale Aufgabe, aber eine saubere zu finden und flexible Lösung, die sich an unterschiedliche Inhalte anpasst, ist überraschend herausfordernd.

Die Problem

Um ein Menü wirklich zu rechtfertigen, sollte jedes Element so positioniert werden, wie Text in einer einzelnen Zeile stehen würde. Das bedeutet, das erste Element linksbündig auszurichten, das letzte Element rechtsbündig auszurichten und die restlichen Elemente gleichmäßig dazwischen zu verteilen.

Die Herausforderungen

• Verwenden von a Die Tabelle ist problematisch, da sie das erste und letzte Element nicht richtig ausrichtet, wenn die Zellen zentriert oder links/rechts ausgerichtet sind.
• Optimale Berechnung Breiten für jeden Menüpunkt sind aufgrund der unterschiedlichen Anzahl von Elementen nicht möglich.

Die Lösung

Der einfachste Ansatz besteht darin, einen Zeilenumbruch durch Einführen zu erzwingen ein Element, das den verbleibenden Raum optisch einnimmt und ihn dann verbirgt. Ein span-Element funktioniert hierfür perfekt:

HTML

<div>

CSS

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

Diese Lösung rechtfertigt effektiv die Menüpunkte, ohne dass Vorberechnungen oder zusätzliche Markierungen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie rechtfertige ich ein horizontales Menü in HTML-CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!