css - 有没有办法在垂直列表中制作水平列表，同时在水平列表 CSS 中制作垂直列表？

Question

我有两个列表。其中之一是垂直的，其中一个是水平的。我想将其中一个列表包装在另一个列表中。我的问题是用户在运行时决定这一点，因此使我的列表 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="horizo​​ntal" 并且 list2 被分配了 class="vertical"，那么 list2 仍然是水平的。

另一个需要注意的因素是，这两个类可能都不会被使用。例如，用户可能决定将外部类和内部类都设为水平。

有没有一种方法可以设置 CSS，这样即使我不知道哪个列表将分配给哪个类，内部列表的 CSS 也不会被外部列表覆盖？

Answer 1

为什么不直接分配外部列表类然后你就可以这样做

.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>