如何将列表标记定位到顶部而不是基线？

Question

我有一个只包含图像的 LI，设置为大约 100 像素高。我在此列表中有字母标记，但它们位于图像的底部，靠近左下角；我可以将它们直接放在上面，靠近左上角吗？

Answer 1

在图像上设置

vertical-align: top;

。

ol {
  list-style-type: lower-latin;
}
img {
  width: 200px;
}

ol.fixed img {
  vertical-align: top;
}

<ol>
<li>this list demonstrates the problem</li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaJjp-zIlciVdoOvjvkxWU9O3TEkEU-ZcSzllCdKxR1qLtYVTiI2PJnYLkN1gZM4lW7V0&usqp=CAU"></li>
<li>the marker is aligned with the bottom of the image</li>
</ol>

<ol class="fixed">
<li>this list demonstrates the solution</li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaJjp-zIlciVdoOvjvkxWU9O3TEkEU-ZcSzllCdKxR1qLtYVTiI2PJnYLkN1gZM4lW7V0&usqp=CAU"></li>
<li>the marker is aligned with the top of the image, not by changing the marker alignment, but by changing the image alignment.</li>
</ol>