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
}

这是一个有效的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: