将 <li> 标记中的行号限制为特定数字答案

【问题标题】：Limit row number in <li> tag to a specific number将 <li> 标记中的行号限制为特定数字
【发布时间】：2018-07-26 23:58:17
【问题描述】：

我需要做一个像这样的列表

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属性。

【问题讨论】：

标签： html list css html-lists

【解决方案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>

【讨论】：

谢谢，但我想知道旧版浏览器是否支持 flexbox？
查看Can I Use... 以获得浏览器支持。
有些旧浏览器似乎不支持flexbox，所以我担心我目前的项目无法使用它，但感谢您的回答

【解决方案2】：

AFAIK 没有 Javascript 是不可能的。

如果您愿意接受 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> 附加到列表中，以确保始终填满第一列。

你可以看看小提琴here。

【讨论】：

很高兴我能帮上忙，但 vals 解决方案似乎要简单得多。

【解决方案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>

【讨论】：