Wie zeige ich Listenelemente als Spalten mit CSS3 an?

Anzeigen von Listenelementen als Spalten mit CSS3-Spalten

Können Sie Listen je nach Bildschirmgröße in Zeilen oder Spalten anzeigen? Dies ist eine häufige Herausforderung beim responsiven Webdesign. Während Tabellen eine Option sind, bietet CSS3 mit seiner Columns-Eigenschaft eine elegantere Lösung.

Hier ist eine Beispiel-HTML-Struktur:

<div>

Um diese Listenelemente als Spalten anzuzeigen, fügen Sie das folgende CSS hinzu :

#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

#limheight li {
  display: inline-block; /* Necessary */
}

Das Ergebnis sind drei Spalten mit Listenelementen, wie gezeigt:

1   4   7
2   5   8
3   6   9

Passen Sie die an Column-Count-Wert, um die Anzahl der Spalten zu ändern. Um die Reaktionsfähigkeit zu erhöhen, können Sie Medienabfragen verwenden, um je nach Bildschirmgröße zwischen einspaltigen und mehrspaltigen Layouts zu wechseln.

Das obige ist der detaillierte Inhalt vonWie zeige ich Listenelemente als Spalten mit CSS3 an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!