限制行數 <li> 標記為特定號碼

Question

我需要做一個看起來像這樣的清單

item1  item4  item7
item2  item5  item8
item3  item6

目前，我正在使用<ul>和<li>標記使用此特定代碼：

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
   <li>item6</li>
   <li>item7</li>
   <li>item8</li>
   <li>item9</li>
</ul>

有什么方法可以將行號限制為特定值（在這種情況下為3），如果數據超過該特定值，則列表將在下一列繼續？ 我閱讀了CSS3的column-count屬性，我也想知道是否還有row-count屬性。

Answer 1

您可以使用彈性框方法來實現此布局。

您將ul的高度設置為li的3倍，其余的是自動的

 ul { display: flex; flex-direction: column; flex-wrap: wrap; height: 4em; } 

 <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> </ul> 

Answer 2

AFAIK，沒有Java腳本是不可能的。

如果您願意使用Javascript解決方案，那么我將按照以下方法進行操作：

var maxRow = 3;
var lis = $("#myList li").length;
var cols = Math.ceil(lis / maxRow) + "" ;

if (cols > 1)
  for (var i = lis; i <  (maxRow * cols); i++) 
    $("#myList").append( '<li class="noBullet">&nbsp;</li>' );

$("#myList").css( { 'columns' : cols,
                    '-webkit-columns' : cols,
                    '-moz-columns' : cols } );

使用此簡單的CSS規則：

.noBullet {list-style-type: none;}

該腳本根據您指定的maxRow構建網格。 它將不可見的<li>追加到列表中，以確保始終填充第一列。

您可以在這里看看小提琴。

Answer 3

在Chrome和IE 11中都可以正常工作

 ul { display: flex; flex-flow: column wrap; max-height: 4em; height: 10vh; } 

 <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> </ul>