So richten Sie die horizontale Navigation in CSS ein

Navigationsleiste

Die kompetente Nutzung der Navigationsleiste ist für jede Website sehr wichtig.

Mit CSS können Sie es in eine schöne Navigationsleiste anstelle eines langweiligen HTML-Menüs umwandeln.

Navigationsleiste = Linkliste

Als Standard-HTML-Basis ist eine Navigationsleiste erforderlich.

Die Navigationsleiste ist im Grunde eine Liste von Links, daher ist die Verwendung der Elemente ff6d136ddc5fdfeffaf53ff6ee95f185 sehr sinnvoll:

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

Es gibt zwei Möglichkeiten, eine horizontale Navigationsleiste zu erstellen. Verwenden Sie Inline- oder Float-Listenelemente.

Beide Methoden sind in Ordnung, aber wenn Sie möchten, dass Links die gleiche Größe haben, müssen Sie die Float-Methode verwenden.

Inline-Listenelemente

Eine Möglichkeit, eine horizontale Navigationsleiste zu erstellen, besteht darin, das Element

Instanz

li{
    display:inline;
}

Anzeige anzugeben :inline; – Standardmäßig ist das 25edfb22a4f469ecb59f1190150159c6-Element ein Blockelement. Hier entfernen wir die Zeilenumbrüche vor und nach jedem Listenelement, um eine einzelne Zeile anzuzeigen.

Floating-Listenelemente

Im obigen Beispiel haben die Links unterschiedliche Breiten.

Damit alle Links die gleiche Breite haben, floaten Sie das 25edfb22a4f469ecb59f1190150159c6-Element und geben Sie die Breite des 3499910bf9dac5ae3c52d5ede7383485-Elements an:

Instance

li{
    float:left;
}
a{
    display:block;
    width:60px;
}

float:left - Verwenden Sie Folien mit schwebenden Blockelementen nebeneinander

display:block – zeigt Links zu Blockelementen an, sodass der gesamte Linkbereich (nicht nur Text) anklickbar ist. Dadurch können wir die Breite angeben

width:60px – Die maximale Breite von Blockelementen standardmäßig. Wir möchten eine Breite von 60 Pixel

angeben

Das obige ist der detaillierte Inhalt vonSo richten Sie die horizontale Navigation in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!