HTML无序列表无法嵌套、子项与父级项目符号对齐问题求助

问题原因 #

1. 全局样式重置覆盖了浏览器默认列表缩进
   你在CSS开头用*通配符将所有元素的margin、padding统一设为0，浏览器默认给<ul>元素设置的、用来实现子列表缩进的左侧内边距被清空，因此子列表无法正常缩进。
2. HTML嵌套列表语法不符合规范
   按照HTML标准，子列表<ul>必须嵌套在对应父级<li>标签内部，你当前的代码直接将子<ul>写在父<li>的同级位置，既不符合语义要求，也会导致样式匹配异常。

解决方案 #

第一步：修正HTML嵌套结构 #

将section-3中异常的列表结构修改为如下格式：

<div class="first-box">
  <ul>
    <li>Room freshener
      <ul>
        <li>Leaving your rooms smelling fresh and relaxing</li>
      </ul>
    </li>
    <li>Insect Repellant</li>
    <li>Toilet Deodorizer</li>
    <li>Sanitizer</li>
  </ul>
</div>

第二步：补充列表缩进样式 #

在CSS中添加如下代码，恢复列表的默认缩进效果，缩进数值可根据视觉需求自行调整：

/* 可单独针对benefits区域设置，避免影响其他模块 */
.benefits-body ul {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.benefits-body ul ul {
  padding-left: 1.5em;
}

/* 如果全站都需要默认列表样式，也可以直接设置全局ul样式 */
/*
ul {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
*/

修改完成后即可实现子列表的预期缩进效果，同时符合HTML语义规范。

内容的提问来源于stack exchange，提问作者Elijah Leis