css - 使用 CSS 将嵌套列表定位在父列表旁边

Question

我有一个嵌套列表，它位于父列表的下面:

<ul>
  <li> Item 1 </li>
  <ul>
    <li> Subitem 1 </li>
    <li> Subitem 2 </li>
    <li> Subitem 3 </li>
  </ul>
</ul>

有什么方法可以用 css 设置它们的样式，使嵌套列表正确并居中于父列表？结果应如下所示:

          - Subitem 1
Item 1    - Subitem 2  
          - Subitem 3 

最好的问候

Answer 1

您可以尝试表格方法:

.list {
  display: table;
}
.list > li, .list > ul {
  display: table-cell;
  vertical-align: middle;
}

<ul class="list">
  <li>Item 1</li>
  <ul>
    <li>Subitem 1</li>
    <li>Subitem 2</li>
    <li>Subitem 3</li>
  </ul>
</ul>

但是，请注意上面的 HTML 是无效的，因为内部 ul 应该是 li 的子级。

如果布局正确，我会使用 inline-block 方法:

.list > li > ul {
  display: inline-block;
  vertical-align: middle;
}

<ul class="list">
  <li>Item 1
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>Subitem 3</li>
    </ul>
  </li>
</ul>