Wie kann ich mit CSS eine lange Webseitenliste in mehrere Spalten aufteilen?

Webseitenlisten mit CSS in Spalten aufteilen

Problem:

Verbessern Sie die Lesbarkeit von eine vertikale Liste auf einer Webseite, indem Sie sie in mehrere aufteilen Spalten.

Lösung:

Die empfohlene CSS-Lösung nutzt die Column-Count-Eigenschaft. Diese Eigenschaft ermöglicht die Aufteilung einer Liste in bestimmte Spalten mit einstellbarem Abstand.

ul {
  column-count: 4;
  column-gap: 20px;
}

Dieser Code erstellt vier Spalten in der Liste mit einem Abstand von 20 Pixeln dazwischen.

Kompatibilität:

Browserunterstützung für die Spaltenanzahl ist weit verbreitet, mit Ausnahme der Internet Explorer-Versionen 9 und unten.

Alternativen:

Für die Internet Explorer-Unterstützung können JavaScript-basierte Lösungen wie Columnizer für jQuery eingesetzt werden.

Fallback für Internet Explorer:

Verwenden Sie CSS-Fallbacks wie float: left, um die Listenelemente horizontal anzuzeigen in Spalten für Internet Explorer.

<!--[if lt IE 10]>
<style>
li {
  width: 25%;
  float: left
}
</style>
<![endif]-->

Hinweis:

Der CSS-Fallback behält ein ähnliches visuelles Layout bei, kann jedoch die Reihenfolge der Listenelemente stören.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS eine lange Webseitenliste in mehrere Spalten aufteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!