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

Question

我有一个 multi-level HTML 从 blade 模板生成的列表：

<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 因为我从数据库中获取我的项目并且节点数可以改变。我还想尽可能避免在我的 blade 模板中添加逻辑，例如计数器以启动第二列，而是没有其他解决方案。

我做了一个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; }，这也将解决您提到的问题，如第二个片段所示：

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>

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

How to display multilevel list in two columns without breaking the sublists?

html

css

multiple-columns

html-lists

laravel-blade