Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein horizontales Nur-Text-Menü in HTML und CSS perfekt ausrichten?

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

DDD
Freigeben: 2024-12-03 05:38:15
Original
950 Leute haben es durchsucht

How Can I Perfectly Justify a Horizontal Text-Only Menu in HTML and CSS?

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;
}
Nach dem Login kopieren
<div>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage