Es gibt zwei Möglichkeiten, eine vertikale Liste in eine horizontale Liste umzuwandeln. 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
Floating-Listenelemente
Im obigen Beispiel haben die Links unterschiedliche Breiten.
Damit alle Links die gleiche Breite haben, floaten Sie das
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
angebenDas obige ist der detaillierte Inhalt vonSo ändern Sie die vertikale Anordnung in CSS in eine horizontale Anordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
