如何实现合法嵌套ol列表且避免额外li序号显示

你要实现的目标布局是：

1. some data
2. some data
3. some data
   i. another data
   ii. another data

之前尝试的两种写法都有问题：要么把嵌套的<ol>直接放在<li>外面，触发HTML合法性警告；要么给嵌套<ol>套个<li>，结果多出一个空的第4项序号。

正确的HTML结构 #

把嵌套的有序列表放在父列表的第3个<li>内部，这是完全符合HTML规范的写法，不会触发校验警告：

<ol>
  <li>some data</li>
  <li>some data</li>
  <li>
    some data
    <ol>
      <li>another data</li>
      <li>another data</li>
    </ol>
  </li>
</ol>

调整样式匹配目标布局 #

如果需要让嵌套列表的序号变为小写罗马数字（i、ii），并调整缩进让布局更贴合需求，添加以下CSS即可：

/* 设置嵌套列表的序号样式 */
ol ol {
  list-style-type: lower-roman;
  /* 自定义缩进距离，按需调整 */
  padding-left: 2em;
  /* 去掉默认的上下外边距，让子列表紧跟父项内容 */
  margin: 0;
}

这种写法既保证了HTML结构的合法性，又能完全实现你想要的布局——嵌套列表是第3个列表项的一部分，不会生成额外的空序号项。

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