如何设置<li>的项目符号显示在内容顶部而非底部？

默认浏览器对<ul>下<li>的渲染规则，是让项目符号（::marker伪元素）和列表项第一行文本的顶部对齐，你遇到的项目符号沉到内容底部的问题，90%以上来自自定义样式修改了<li>的垂直对齐逻辑，不需要改动HTML结构，几行CSS就能快速修好。

最省事的通用修复 #

如果你为了给列表项加内部布局，已经给<li>设置了display: flex，只需要追加一行对齐规则：

li {
  align-items: flex-start;
}

这类场景下的问题基本都是flex布局默认的垂直居中规则，把默认生成的项目符号对齐到了内容块的中线甚至底部，加上这行代码后项目符号会立刻回到内容顶部对齐，不需要调整其他已写好的样式。

兜底兼容方案 #

如果调整完flex对齐仍然没有效果，大概率是全局样式重置时不小心把<li>的默认列表显示类型改成了block（很多人写样式重置的时候会犯这个错），这时候可以直接从伪元素层面强制修正对齐：

/* 恢复li的默认列表渲染属性 */
li {
  display: list-item;
}
/* 强制项目符号和内容顶部对齐 */
li::marker {
  vertical-align: top;
}

避坑提示 #

• 不要为了样式重置把<ul>的默认padding-inline-start全部清零，否则修正对齐后项目符号会跑到可视区域外看不见
• 不建议靠list-style-position: inside把项目符号塞到内容块里凑位置，这种方式在多行文本场景下很容易出现换行错位的问题

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