如何在不切入子列表的情况下在两列中显示多级列表？

Question

我有一个从刀片模板生成的多层HTML列表：

<ul style="columns: 2;">
    <li>Category 1</li>
    <ul>
        <li>Skill 1.1</li>
        <li>Skill 1.2</li>
        <li>Skill 1.3</li>
    </ul>
    <li>Category 2</li>
    <ul>
        <li>Skill 2.1</li>
        <li>Skill 2.2</li>
    </ul>
    <li>Category 3</li>
    <ul>
        <li>Skill 3.1</li>
    </ul>
    <li>Category 4</li>
    <ul>
        <li>Skill 4.1</li>
        <li>Skill 4.2</li>
    </ul>
</ul>

我希望将输出分成两列，而不切入其中一个子列表。这是所需的输出：

Category 1       Category 3
    Skill 1.1        Skill 3.1
    Skill 1.2    Category 4
    Skill 1.3        Skill 4.1
Category 2           Skill 4.2
    Skill 2.1
    Skill 2.2

我的问题是“ Skill 2.2”在第二列中，因为系统使两列尝试具有尽可能多的相同行数。

我已经看到了此question，但所有答案都建议更新HTML。我宁愿只使用CSS，因为我是从数据库中获得商品的，而且节点的数量可以更改。我也想尽可能避免在刀片模板中添加逻辑（如计数器）来开始第二列，而是没有其他解决方案。

我制作了codepen来说明问题。

谢谢您的帮助。

Answer 1

您可以使用ul ul { page-break-inside: avoid; }。这样可以避免子列表内的分页符（即ul中的任何ul），因此，分栏符的作用类似于分页符：

ul ul  {
  page-break-inside: avoid;
}

<ul style="columns: 2;">
  <li>Category 1</li>
  <ul>
    <li>Skill 1.1</li>
    <li>Skill 1.2</li>
    <li>Skill 1.3</li>
  </ul>
  <li>Category 2</li>
  <ul>
    <li>Skill 2.1</li>
    <li>Skill 2.2</li>
  </ul>
  <li>Category 3</li>
  <ul>
    <li>Skill 3.1</li>
  </ul>
  <li>Category 4</li>
  <ul>
    <li>Skill 4.1</li>
    <li>Skill 4.2</li>
  </ul>
</ul>

添加评论后：
实际上，子列表通常以不同的方式嵌套：第二级ul在
inside中是第一级li。如果以这种方式更改HTML，则可以使用ul > li { page-break-inside: avoid; }，它也可以解决您提到的问题，如第二段所示：
 
ul > li {
  page-break-inside: avoid;
}
<ul style="columns: 2;">
  <li>Category 1
    <ul>
      <li>Skill 1.1</li>
      <li>Skill 1.2</li>
      <li>Skill 1.3</li>
    </ul>
  </li>
  <li>Category 2
    <ul>
      <li>Skill 2.1</li>
      <li>Skill 2.2</li>
    </ul>
  </li>
  <li>Category 3
    <ul>
      <li>Skill 3.1</li>
    </ul>
  </li>
</ul>