HTML验证问题：<li>无法嵌套于<div>的解决方案咨询

嘿，这个问题我碰到过好多次啦——HTML验证工具报错，是因为**<li>元素不能直接放在<div>里**！根据HTML规范，<li>的父元素只能是<ul>（无序列表）、<ol>（有序列表）、<menu>（菜单列表，现在用得少）这些专门的列表容器，直接把<li>丢进<div>属于语义错误，所以验证通不过。

修复方案：给<li>套上<ul>或<ol> #

你只需要把证书的<li>标签包裹在<ul>（如果是无序列表）或者<ol>（如果是有序列表，比如按获取时间排序）里，再嵌入到你原来的结构中就行，完全不影响你原来的鼠标悬停放大效果。

修改后的示例代码：

<div class="grow">
  <div class="title3">Experience</div>
  <div class="mainbox">
    <p class="text">Sample text.</p>
    <!-- 用ul包裹所有li，满足HTML语义规范 -->
    <ul class="certificates">
      <li>云计算工程师认证</li>
      <li>Web前端开发高级证书</li>
      <li>项目管理专业人士（PMP）</li>
    </ul>
  </div>
</div>

可选：自定义列表样式（保持页面美观） #

默认的列表会有圆点和缩进，如果你想让它和页面风格统一，可以加一点CSS调整：

/* 去掉默认的列表圆点和左缩进 */
.certificates {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 0 0;
}

/* 给每个证书项加一点间距和分隔线 */
.certificates li {
  padding: 0.6rem 0;
  border-bottom: 1px solid #f0f0f0;
}

这样修改后，不仅能通过HTML验证，还能让页面的语义结构更清晰，对搜索引擎和屏幕阅读器也更友好哦～

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