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="horizontal"和list2被分配了class="vertical"，那么list2仍将是水平的。

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

有没有办法设置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>

有没有一种方法可以使列表在垂直列表内水平放置，但也可以使垂直列表在水平列表CSS内放置？

1 个答案: