リスト項目を列として表示

Question

リスト項目を特定の順序で列に表示する必要があります。例えば

、私はこのようなコードを持っている：

<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> 

私はこのような3つの列にそれを表示したい：

1 5 
2 6 
3 
4 

以上の要素が存在します。

1 5 9 
2 6 10 
3 7 11 
4 8 

列数+列幅がtrとして機能しませんyは水平方向に塗りつぶされたリストを表示するために、縦方向に表示する必要があります（2番目または3番目の列がない場合はオンになります）。

解決方法はありますか？

Answer 1

を使用することができます購入します。 ulの高さが指定されている必要があります。

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

    height: 400px; 
} 

li { 
    flex-basis: 25%; 
} 

"flex-direction：column"は、項目を垂直方向に積み重ねます。 「フレックスラップ：ラップ」は、1つが満たされたときに次の列にラップさせます。そしてリスト項目の "flex-basis：25％"はすべての項目が親の高さの4分の1になるようにします。したがって、列あたりの行数を増減する場合は、この数値を変更できます。

Answer 2

私はどこで使用するのか分かりませんので、私の答えは間違っています。 は、あなたが、私はフレキシボックスを使用してソリューションを持っているテーブルタグ

<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>