我有两个列表。其中之一是垂直的,其中一个是水平的。我想将其中一个列表包装在另一个列表中。我的问题是用户在运行时决定这一点,因此使我的列表 display:block
或 display:inline-block
似乎不起作用。这是一些示例 HTML
<ul id="list1">
<li>
<ul id="list2"></ul>
</li>
</ul>
下面是 list1
和 list2
将被分配的两个潜在类。
.horizontal li {
display: inline-block;
}
.vertical li {
display: block;
}
list1
和 list2
没有分配任何一个类的原因是用户可以在运行时分配它们。因此,最外层的类似乎决定了最内层的行为。因此,如果 list1
被分配了 class="horizontal"
并且 list2
被分配了 class="vertical"
,那么 list2
仍然是水平的。
另一个需要注意的因素是,这两个类可能都不会被使用。例如,用户可能决定将外部类和内部类都设为水平。
有没有一种方法可以设置 CSS,这样即使我不知道哪个列表将分配给哪个类,内部列表的 CSS 也不会被外部列表覆盖?
最佳答案
为什么不直接分配外部列表类然后你就可以这样做
.horizontal li,
.vertical li li {
display:inline-block;
vertical-align:top;
}
.vertical li,
.horizontal li li {
display:block;
}
<ul class="horizontal">
<li>
this is horizontal outer
<ul>
<li>this is vertical inner</li>
<li>
1 inner
</li>
<li>
2 inner
</li>
<li>
3 inner
</li>
</ul>
</li>
<li>
1 outer
</li>
<li>
2 outer
</li>
<li>
3 outer
</li>
</ul>
<ul class="vertical">
<li>
this is vertical outer
<ul>
<li>this is horizontal inner</li>
<li>
1 inner
</li>
<li>
2 inner
</li>
<li>
3 inner
</li>
</ul>
</li>
<li>
1 outer
</li>
<li>
2 outer
</li>
<li>
3 outer
</li>
</ul>
关于css - 有没有办法在垂直列表中制作水平列表,同时在水平列表 CSS 中制作垂直列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58804607/