列表大小可变时<ul>标签内项目符号列表的正确对齐实现方法

问题根源说明 #

• list-style-position: outside时，项目符号偏移量基于当前li的字体大小计算，不同字号的li项目符号位置不统一，出现对齐错乱
• list-style-position: inside时，项目符号被识别为行内文本的首字符，多行文本换行后无缩进，不符合排版预期

解决方案：自定义项目符号+统一缩进控制 #

完全放弃原生list-style的默认渲染逻辑，用伪元素自定义项目符号，通过固定左侧内边距实现统一对齐：

完整代码示例 #

/* 重置列表默认样式 */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  position: relative;
  /* 统一预留左侧项目符号的占位空间，需要固定对齐就用px，跟随全局字号就用em */
  padding-left: 1.5em;
  text-align: justify;
  line-height: 1.5;
}
/* 自定义项目符号 */
li::before {
  content: "•";
  position: absolute;
  /* 固定定位在左侧预留空间的位置 */
  left: 0;
  /* 调整垂直对齐，适配不同字号的首行文本 */
  top: 0.25em;
  line-height: 1;
  /* 项目符号样式可自定义，不受原生限制 */
  font-size: 1em;
  color: #333;
}

<ul>
  <li style="font-size: 30px;">12345 67890 12345 67890 12345 67890</li>
  <li>12345</li>
  <li>678910</li>
</ul>

方案优势 #

• 所有项目符号统一左对齐，完全不受li内部字体大小影响
• 多行文本的第二行及后续内容统一和首行文本对齐，符合排版规范
• 可自定义项目符号的样式、大小、颜色、间距，灵活度远高于原生list-style

有序列表适配方案 #

如果是ol有序列表，只需要新增计数器配置即可：

ol {
  counter-reset: list-counter;
}
li::before {
  content: counter(list-counter) ". ";
  counter-increment: list-counter;
}

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