Wie kann ich ein horizontales Nur-Text-Menü in HTML und CSS perfekt ausrichten?

Horizontale Menüs in HTML-CSS ausrichten: Eine umfassende Lösung

Trotz der Fülle an Tutorials zu Menüleisten in HTML bleibt das Erreichen einer optimalen Ausrichtung für Nur-Text-Menüs eine Herausforderung . In diesem Artikel wird eine robuste Lösung vorgestellt, die die richtige Ausrichtung, optimale Abstände und Flexibilität für unterschiedliche Menüelementanzahlen gewährleistet.

Das Problem verstehen

Das Ziel besteht darin, ein horizontales Menü zu erstellen, bei dem:

• Das erste Element ist linksbündig
• Das letzte Element ist rechtsbündig
• Verbleibende Elemente werden gleichmäßig über die Menüleiste verteilt
• Die Lösung sollte mit unterschiedlicher Anzahl von Elementen funktionieren, ohne optimale Breiten vorab zu berechnen

Das Unsichtbare Erweiterungsspanne

Der Schlüssel zum Erreichen dieser Ausrichtung besteht darin, am Ende des Menüs ein unsichtbares Element einzufügen, das einen Zeilenumbruch erzwingt. Indem wir dieses Element strategisch ausblenden, können wir den nötigen Platz für eine optimale Artikelverteilung schaffen.

Hier ist der optimale CSS- und HTML-Code:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

<div>

So funktioniert es

1. #menu legt die Ausrichtung für das gesamte Menü fest.
2. #menu * stellt sicher, dass alle untergeordneten Elemente in der Zeile sind Elemente.
3. #menu li macht Menüelemente zu Inline-Blöcken, sodass sie horizontal fließen können.
4. Der verborgene Bereich (#menu span) wird erweitert, um den verbleibenden Raum auszufüllen, wodurch ein Zeilenumbruch erzwungen wird Das Menü richtig ausrichten.

Diese Lösung bietet eine elegante und effektive Möglichkeit, ausgerichtete horizontale Menüs in HTML-CSS zu erstellen und dabei unabhängig von der Anzahl optimale Abstände und Ausrichtung sicherzustellen von Menüpunkten.

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