想做一个嵌套列表。我可以在哪里将外部列表显示为内联 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
最佳答案
您的 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>
关于html - 定位嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44947951/