Wie zentriere ich ein horizontales Menü nur mit CSS?

So richten Sie ein horizontales Menü zentriert aus

Sie sind auf Schwierigkeiten gestoßen, ein horizontales Menü zentriert auszurichten, obwohl Sie verschiedene Techniken ausprobiert haben. Dieser Leitfaden befasst sich mit dem Problem und bietet eine bewährte Lösung.

HTML- und CSS-Code

<div class="topmenu-design">
    <ul>

#buttons {
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
}

#buttons ul {
    list-style: none;
    position: relative;
    left: 50%;
}

#buttons li {
    float: left;
    position: relative;
}

#buttons a {
    text-decoration: none;
    margin: 10px;
    background: red;
    float: left;
    border: 2px outset blue;
    color: #fff;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
}

#buttons a:hover {
    border: 2px inset blue;
    color: red;
    background: #f2f2f2;
}

#content {
    overflow: hidden; /* hide horizontal scrollbar*/
}

Lösung: Verwendung von Float und relativer Positionierung

Empfohlen Die Lösung beinhaltet die Verwendung von Float und relativer Positionierung. Bei dieser Technik wird das Menü in einen Float-Wrapper eingeschlossen, der außerhalb des Bildschirms links positioniert wird. Anschließend werden die verschachtelten Listenelemente in die entgegengesetzte Richtung positioniert, wodurch sie effektiv horizontal innerhalb des Wrappers zentriert werden.

Implementierung

1. Fügen Sie die Eigenschaft „float: right“ zum übergeordneten Div hinzu, um es auszurichten rechts auf der Seite.
2. Stellen Sie position: relative und left: -50 % auf dem Wrapper ein, um ihn um 50 % nach links zu verschieben, was dazu führt um den darunter liegenden Inhalt zu überlappen.
3. Wirken Sie der Überlappung entgegen, indem Sie position: relative und left: 50 % zur Ul. anwenden.
4. Setzen Sie float: left auf den li-Elementen, um sicherzustellen, dass sie nach links schweben die ul.
5. Fügen Sie Stile hinzu, um das Erscheinungsbild des Menüs anzupassen, z. B. Textdekoration, Ränder und Hintergrund Farbe.

Weitere Überlegungen

Diese Technik hält den Fluss des Inhalts aufrecht und ermöglicht die Anzeige anderer Elemente unterhalb des zentrierten Menüs. Im Gegensatz zu JavaScript-Lösungen verwendet dieser Ansatz CSS-Eigenschaften und gewährleistet so die Kompatibilität mit älteren Browsern.

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