Wie kann ich Listenelemente mithilfe von CSS vertikal als Spalten anzeigen?

CSS-Spalten: Listenelemente vertikal anzeigen

Als Reaktion auf die Herausforderung, Listenelemente vertikal als Spalten anzuzeigen, wenden wir uns CSS3-Spalten zu. Mit dieser Funktion können wir mühelos das gewünschte Layout erreichen.

Bedenken Sie den folgenden HTML-Code:

<div>

Jetzt fügen wir CSS hinzu, um ihn zu formatieren:

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

Bei CSS-Spalten wird die angegebene Anzahl an Spalten (in diesem Fall 3) automatisch erstellt. Es passt die Breite der Spalten dynamisch an, wenn sich die Größe des Browsers ändert. Dies sorgt für die gewünschte vertikale Anordnung der Listenelemente.

Genießen Sie die Leistungsfähigkeit von CSS-Spalten, um Ihre responsiven Layouts zu verbessern und Listenelemente elegant als Spalten anzuzeigen!

Das obige ist der detaillierte Inhalt vonWie kann ich Listenelemente mithilfe von CSS vertikal als Spalten anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!