Wie kann ich mit CSS mehrspaltige Listen erstellen und mit der Internet Explorer-Kompatibilität umgehen?

Spalten aus einer Liste mit CSS erstellen

Ihre Webseite enthält eine lange Liste, die übermäßig scrollt. Um die Lesbarkeit zu verbessern, möchten Sie diese Liste in mehreren Spalten anzeigen, ohne dass umfangreiche manuelle Anpassungen erforderlich sind, wenn die Liste wächst.

CSS stellt eine einfache Lösung dar:

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

Dieser CSS-Code stellt sicher, dass die Die Liste wird in vier Spalten mit einem Abstand von 20 Pixeln dazwischen unterteilt.

Cross-Browser Kompatibilität

Die CSS-Lösung zum Erstellen von Spalten wird von allen Browsern weithin unterstützt, mit Ausnahme von Internet Explorer 9 und älter.

Alternative für Internet Explorer

Wenn Sie Internet Explorer-Kompatibilität benötigen, können Sie JavaScript-Alternativen wie den Columnizer jQuery in Betracht ziehen Plugin.

Fallback auf Float für Internet Explorer

Eine Alternative speziell für Internet Explorer ist die Verwendung eines Float-Fallbacks. Dies kann zu einer falschen Artikelreihenfolge führen, aber das visuelle Erscheinungsbild wird ähnlich sein:

li {
    width: 25%;
    float: left
}

Sie können diesen Fallback selektiv mit Modernizr anwenden, wenn er bereits in Ihrem Projekt vorhanden ist.

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