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

Question

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

<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 
    Sub 1 
    Sub 2 
Top 2 
    Sub 1 
    Sub 2 

它会被渲染

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

等我的目录标记有多达十几个顶级节点和在某些地区嵌套5深。

我知道如何水平渲染整个列表，但难住垂直渲染顶级节点但是所有的子节点。

感谢您的帮助！

Answer 1

你加价是有点不正确，你需要用孩子<li>的内部与另一<ol>让你加价是这样的：

<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> 

接下来，使用下面的CSS，你可以实现你想要做什么：

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

这里的工作演示：

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

<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>