在图像上设置
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>