목록 항목을 열로 표시

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> 

이 같은 세 컬럼에 표시하려면 :

:

1 5 
2 6 
3 
4 

이상의 요소가있을 때

1 5 9 
2 6 10 
3 7 11 
4 8 

열 개수 + 열 너비가 tr으로 작동하지 않습니다. y는 가로로 채워진 목록을 표시하고 세로 순서로 표시해야합니다 (두 번째 또는 세 번째 열이 없으면 표시됨).

해결 방법이 있습니까?

Answer 1

을 사용할 수 있습니다 주문. ul이 지정된 높이를 가져야합니다.

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

    height: 400px; 
} 

li { 
    flex-basis: 25%; 
} 

"flex-direction : column"은 항목을 세로로 쌓게합니다. "플렉스 랩 : 랩"은 하나가 채워지면 다음 열로 래핑합니다. 목록 항목의 "flex-basis : 25 %"는 모든 항목이 상위 항목의 네 번째 항목이되도록합니다. 따라서 열 당 행 수가 많거나 적 으면이 수를 변경할 수 있습니다.

Answer 2

어디에서 사용할지 모르므로 아마도 내 대답은 잘못되었습니다. 는 내가 인 flexbox를 사용하여 솔루션을 가지고 테이블 태그를

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