如何将Divi（HTML/CSS）嵌套列表中项目之间的间距标准化？

Question

我是HTML的新手，这可能很容易解决。我正在使用Divi更新WordPress站点，并正在创建一些带有子点的项目符号点的嵌套无序列表＆lt; ul＆gt;。

每个子点都需要一个嵌入式子列表，默认格式似乎意味着越多的子点，在父点之后的空间越多。
我屏幕截图并将其标记为显示间距的多样性：

​子名单。

我认为，代码看起来很正常：

.bullet_list_spacing ul>li {
  margin-bottom: 16px;
}

.bullet_list_spacing ul>li:last-child {
  margin-bottom: 0 !important;
}

.bullet_list_spacing ul>li:first-child {
  margin-top: 0 !important;
}

.bullet_list_spacing ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

<div class="bullet_list_spacing">
  <ul>
    <li>text</li>
    <li>text
      <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
      </ul>
    </li>
    <li>text
      <ul>
        <li>text</li>
        <li>text</li>
      </ul>
    </li>
  </ul>
</div>

我尝试通过创建和格式化CSS类（使用此处和 /a>），然后抛出我能想到的所有变体。

我将CSS放在Divi的“外观”菜单的“自定义CSS”部分中（ screenshot ）并在文本模块设置的“高级”部分中应用CSS类（ screenShot。 ）。

Answer 1

主要问题是＆gt;选择直接的孩子。只需将保证金顶/底部应用：0;上所有li。然后，您通过使用ul＆gt; li＆gt; ul＆gt; li将Margin-Bottom：16px应用于所有第二级LI。要使用last-Child您不希望使用此应用的例外，您可以起诉：not（） selector：selector：

.bullet_list_spacing li {
  margin-top: 0;
  margin-bottom: 0;
}

.bullet_list_spacing ul>li>ul>li:not(:last-child) {
  margin-bottom: 16px;
}

<div class="bullet_list_spacing">
  <ul>
    <li>text</li>
    <li>text
      <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
      </ul>
    </li>
    <li>text
      <ul>
        <li>text</li>
        <li>text</li>
      </ul>
    </li>
  </ul>
</div>