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

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

我的问题是“技能 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 在一级-li。如果您以这种方式更改 HTML，则可以使用 ul > li { page-break-inside: avoid; }，这也将解决您提到的问题，如第二个 sn-p 所示：

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>