Wie kann ich mit CSS mehrspaltige Listen erstellen?

Listen in Spalten mit CSS präsentieren

Wenn Sie eine lange Liste mit kurzen Elementen haben, die Sie in einem kompakteren Format anzeigen möchten, Erwägen Sie, es in Spalten aufzuteilen. CSS bietet hierfür eine unkomplizierte Lösung.

CSS Multi-Column Layout

Mit dem CSS Multi-Column Layout-Modul können Sie die Anzahl der Spalten angeben, die innerhalb eines erstellt werden sollen Element. So wenden Sie es an:

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

Dieser Code rendert die Liste in vier Spalten mit einem Abstand von 20 Pixel dazwischen.

Browser-Unterstützung

CSS Multi-Column Layout wird von allen modernen Browsern außer Internet Explorer 9 oder unterstützt älter.

Alternativen für Internet Explorer

Wenn Sie Internet Explorer-Unterstützung benötigen, können Sie eine JavaScript-Lösung wie das Columnizer jQuery-Plugin verwenden.

Fallback auf Float für Internet Explorer

Als Fallback können Sie CSS Float verwenden, um etwas Ähnliches zu erreichen Layout im Internet Explorer. Diese Methode behält jedoch die Reihenfolge der Elemente, nicht aber die Spaltenstruktur bei.

li {
    width: 25%;
    float: left
}

Hinweis: Dieser Fallback kann mit Modernizr oder ähnlichen bedingten Ladetechniken verwendet werden, um nur auf Internet Explorer abzuzielen .

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS mehrspaltige Listen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!