Listenelemente als Spalten anzeigen

Question

Ich muss Listenelemente in Spalten in bestimmter Reihenfolge anzeigen.

Zum Beispiel, ich habe Code wie folgt:

<div style="height:400px;"> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
</ul> 
</div> 

Ich mag es so in drei Spalten angezeigt werden:

1 5 
2 6 
3 
4 

Oder, wenn es mehr Elemente sein:

1 5 9 
2 6 10 
3 7 11 
4 8 

Spaltenanzahl + Spaltenbreite funktioniert nicht wie es tr y, um die horizontal gefüllte Liste anzuzeigen, und ich muss sie in vertikaler Reihenfolge anzeigen (sie ist aktiviert, wenn keine zweite oder dritte Spalte vorhanden ist).

Gibt es dafür eine Lösung?

Answer 1

verwenden kann ich eine Lösung mit Flexbox haben. Es erfordert, dass Ihre ul eine bestimmte Höhe hat.

ul { 
    display: flex; 
    list-style: none; 
    flex-direction: column; 
    flex-wrap: wrap; 

    height: 400px; 
} 

li { 
    flex-basis: 25%; 
} 

Die "flex-direction: column" bewirkt, dass die Objekte vertikal gestapelt werden. Der "flex-wrap: wrap" bewirkt, dass sie in die nächste Spalte wechseln, wenn eine gefüllt ist. Und die "Flex-Basis: 25%" auf den Listenelementen macht es so, dass jedes Element ein Viertel der Höhe des Elternteils ist. Diese Zahl kann also geändert werden, wenn Sie mehr oder weniger Zeilen pro Spalte wünschen.

Answer 2

Ich weiß nicht, wo Sie es verwenden werden, also ist meine Antwort vielleicht falsch. Kaufen Sie table-Tag

<div style="height:400px;"> 
    <table><ul style="list-style:none;"> 
     <tr> 
      <td> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
      </td> 
      <td> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
      </td> 
      <td> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>9</li> 
      </td> 
     </tr></ul> 
    </table> 
</div>