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没有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。

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>

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

3 个答案: