html - 定位嵌套列表

Question

想做一个嵌套列表。我可以在哪里将外部列表显示为内联 block ，将内部列表显示为 block 。我一定是错误地定位了每个列表的类别，因为我无法应用这些首选项？谢谢:)

.days ul li {
  display: inline-block
}

.points ul li {
  display: block;
}

<ul>
  <li class="days">
    <h2>Title</h2>

    <ul class="points">
      <li>Point 1</li>
      <li>Point 2</li>
  </li>
  </ul>
</ul

Answer 1

您的 CSS 中的选择器有误。您正在选择带有 .days 和 .points 类的 ul “内部”元素。您需要的是 ul 元素中的 li，在本例中为 .days 和 .points。

另一个问题是您的 html 语法。只有li可以是ul的后代，所以需要把第二个ul放在li里面。

.days li {
  display: inline-block;
  width: 150px;
}

.points li {
  display: block;
}

<ul class="days">
  <li>
    <h2>Title</h2>
    <ul class="points">
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </li>
  <li>
    <h2>Title 2</h2>
    <ul class="points">
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </li>
</ul>