如何在两列中显示多级列表而不破坏子列表？

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 "在第二列，因为系统会将两列尽量排成相同的行数。

我已经看到了这个 疑问 但所有的答案都建议更新HTML.我宁愿只使用CSS，因为我从数据库中获取我的项目，而且节点的数量可以改变。我还想尽可能避免在我的刀片模板中添加逻辑，如计数器开始第二列，而是没有其他解决方案。

我做了一个 密码笔 来说明这个问题。

预先感谢您的帮助。

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; }这也将解决你提到的问题，正如第二个片段所示。

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>