如何用::marker实现无序列表理想排版？解决固定值与换行问题

要实现你想要的效果（绿色项目符号、文字换行不覆盖标记、内边距随字体大小自适应），可以通过相对单位设置ul的内边距结合list-style-position: outside和::marker完成，无需固定像素值，代码如下：

ul {
  list-style-position: outside;
  padding-left: 1.5em; /* 用em相对单位，随字体大小自动调整 */
}

ul li::marker {
  color: green;
  /* 可选：用em单位调整标记大小，保持与字体的自适应关系 */
  font-size: 1.1em;
}

原理说明 #

1. 相对单位em：1em等于当前元素的字体大小，修改列表字体大小时，padding-left会自动按比例缩放，彻底解决固定像素值失效的问题。你可以根据标记实际宽度微调1.5em（比如1.2em或1.8em），确保标记与文字间距合适。
2. list-style-position: outside：让标记处于li的外部布局区域，文字换行时会自动对齐到li的内容起始位置，不会跑到标记下方。
3. ::marker伪元素：仅负责修改标记的颜色（或大小），完全符合你“只用::marker实现”的要求。

如果需要更精确的间距控制，也可以用ch单位（基于当前字体中数字0的宽度），比如padding-left: 2ch，同样能实现自适应效果。

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