限制< li>中的行号标记为特定号码 [英] Limit row number in <li> tag to a specific number

问题描述

我需要列出一个看起来像这样的列表

I need to make a list that looks like this

item1  item4  item7
item2  item5  item8
item3  item6

目前，我正在使用<ul>和<li>标记使用此特定代码:

currently I am using this particular code using <ul> and <li> tag:

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

is there any way to limit the row number to specific value (in this case 3) and if the data exceed that specific value, the list will continue in the next column? I read column-count properties of CSS3, I also wonder if there is also row-count properties.

推荐答案

您可以使用弹性框方法来实现此布局.

You can achieve this layout using a flex box approach.

您将ul的高度设置为li的3倍，其余的都是自动的

You set the ul to have a height of 3 times the li, and the rest is automatic

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>

这篇关于限制< li>中的行号标记为特定号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！