So ändern Sie die vertikale Anordnung in CSS in eine horizontale Anordnung

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

-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 ä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!