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>