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

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

• -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

• -Element und geben Sie die Breite des -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!