如何使ol-li列表模拟自定义div编号列表的无空格标点格式？

没问题，这事儿我熟！要把默认的<ol><li>列表改成和你之前自定义div结构完全一致的无空格编号样式，只需要用CSS计数器+伪元素来完全控制编号的生成和布局就行，完美适配你生成PDF的需求，具体步骤如下：

1. 重置OL的默认样式 #

首先要清除浏览器给<ol>自带的默认内边距和编号样式，同时初始化自定义计数器：

ol {
  list-style: none; /* 去掉浏览器默认的编号 */
  padding-left: 0; /* 清除默认左内边距，避免多余留白 */
  counter-reset: list-counter; /* 初始化一个名为list-counter的计数器 */
}

2. 自定义LI的编号与布局 #

通过:before伪元素生成编号，完全控制编号和内容的间距，和你原来的.list-number、.list-content样式对齐：

ol li {
  position: relative; /* 为伪元素定位做准备 */
  padding-left: 18px; /* 和你原来的.list-content的padding-left保持一致 */
  text-align: justify; /* 继承原来的两端对齐样式 */
  counter-increment: list-counter; /* 每一个li都让计数器+1 */
}

ol li:before {
  content: counter(list-counter) "."; /* 生成带点的编号，比如1.、10.，完全无额外空格 */
  position: absolute;
  left: 0; /* 把编号固定在li的最左侧 */
  float: left; /* 模拟原来.list-number的浮动效果 */
}

3. 扩展：多级嵌套列表（可选） #

如果你的列表有嵌套需求，比如1.1、1.2这种，可以扩展计数器逻辑：

/* 嵌套的ol重置子计数器 */
ol ol {
  counter-reset: sub-list-counter;
  padding-left: 20px; /* 嵌套层级增加左内边距，区分层级 */
}

/* 子li的编号用父计数器+子计数器组合 */
ol ol li:before {
  content: counter(list-counter) "." counter(sub-list-counter) ".";
  counter-increment: sub-list-counter;
}

为什么这个方案好用？ #

• 完全符合语义化：用<ol><li>替代自定义div，PDF生成工具对语义化标签的兼容性更好，避免布局错乱
• 1:1还原原样式：编号和内容之间绝对没有多余空格，和你原来的div结构视觉效果完全一致
• 动态生成更方便：不管是后端渲染还是前端动态添加列表项，计数器都会自动更新编号，不用手动维护div的编号值

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