如何将列表标记定位到顶部而非基线？（LI含图片场景）

你可以通过自定义列表标记的方式精准控制位置，默认标记的位置会跟着元素基线走，所以才会跑到图片底部，试试下面两种方案：

方案一：调整默认标记的定位 #

利用CSS的::marker伪元素调整位置，适合不想改动默认列表结构的情况：

li {
  list-style-type: lower-alpha; /* 保持字母标记类型 */
  position: relative;
  padding-left: 22px; /* 给标记留出足够空间 */
}

li::marker {
  position: absolute;
  top: 0;
  left: 0;
}

注：部分旧版浏览器对::marker的定位支持有限，遇到兼容性问题可以换下面的方案。

方案二：用伪元素自定义标记 #

完全替换默认标记，定位更灵活：

/* 给父级ul初始化计数器 */
ul {
  list-style: none;
  counter-reset: img-list;
}

li {
  position: relative;
  padding-left: 22px; /* 给自定义标记留位置 */
}

/* 生成字母标记 */
li::before {
  counter-increment: img-list;
  content: counter(img-list, lower-alpha) "."; /* 生成a.、b.这样的格式 */
  position: absolute;
  top: 0;
  left: 0;
}

这样设置后，标记会牢牢固定在li的顶部左侧，刚好对应图片的顶部左下角位置，不管图片高度怎么变都能适配。

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