时间戳

首页 > 解决方案 > 当 li 达到 5 个内容时，如何让我的 ul li 创建新列？

html - 当 li 达到 5 个内容时，如何让我的 ul li 创建新列？

问题描述

这是我的示例代码

ul li{
    list-style: none;
  }
<ul>
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 

  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
</ul>

这就是我试图在不使用网格系统的情况下实现的目标。 在此处输入图像描述

我不确定是否存在类似于我的问题，如果有请留下链接，因为我一直在尝试搜索它，但我只是不知道该问题的正确关键字。谢谢

标签： htmlcss

解决方案

CSS-Grid 可以做到这一点。只需定义最多 5 行。

ul li {
  list-style: none;
}

ul {
  display: grid;
  grid-template-rows: repeat(5, min-content);
  grid-auto-flow: column;
}
<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>4</li>
  <li>4</li>
  <li>4</li>
  <li>4</li>
  <li>4</li>
</ul>

推荐阅读