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

您可以尝试使用表格式方法：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;