<ul>中的第一个<li>元素位于同一行

Question

<ul>
  <li>1</li>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</ul>

我将如何显示此列表：

Answer 1

在ul内显示inline-block为li，并将其垂直对齐顶部：

.nested {
  display: inline-block;
  vertical-align: top;
}

<ul>
  <li>1
    <ul class="nested">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </li>
</ul>

Answer 2

您可以将float: left添加到ul li和ul ul，如下所示：

＆＃13;

＆＃13;

    <ul>
      <li style="float: left;">1</li>
      <ul style="float: left;">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在嵌套的display:inline-block代码中使用ul以及vertical-align:top

<ul>
  <li>
  <ul style="display:inline-block;vertical-align:top;">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
  </li>
</ul>

Answer 4

.aligned-innerlist {
  margin-top: -17px;
}

  <ul>
    <li>1
    <ul class="aligned-innerlist">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
    </li>
  </ul>