Html CSS将层次结构列表拆分为水平排列的层次结构

我有一个有序的列表，其中有多个顶层节点，我需要水平布局（同时保留子节点的垂直布局）。例如，对于基本列表标记，例如：

<ol>
     <li>Top 1
          <li>Sub 1</li>
          <li>Sub 2</li>
     </li>
     <li>Top 2
          <li>Sub 1</li>
          <li>Sub 2</li>
     </li>
</ol>

它将被渲染

Top 1            Top 2
   Sub 1            Sub 1
   Sub 2            Sub 2

我的列表标记有多达12个顶级节点，在某些区域嵌套了5个深度

我知道如何水平地渲染整个列表，但却不知道如何水平地渲染顶级节点，而垂直地渲染其所有子节点

---

谢谢你的帮助

您的标记有点不正确，您需要用另一个

将子

包在里面，以便您的标记如下所示：

<ol>
    <li>Top 1
        <ol>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ol>
    </li>
    <li>Top 2
        <ol>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ol>
    </li>
</ol>

这是一个有效的演示：

olli{
显示：内联块；
}
ol li ol li{
显示：块；
}
ol ol{
左侧填充：5px
}

第一名
子1
次级2

前2名
子1
次级2

<ol>
    <li>Top 1
        <ol>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ol>
    </li>
    <li>Top 2
        <ol>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ol>
    </li>
</ol>

ol li {
    display: inline-block;
}
ol li ol li {
    display: block;
}
ol ol {
    padding-left: 5px
}