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

fcipmucu  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(121)

我有一个LI,它只包含一个图像,设置为大约100 px高。我在这个列表上有字母标记,但是它们位于图像的底部,靠近左下角;我能把它们放在它的正上方,靠近左上角吗?

nhhxz33t

nhhxz33t1#

在图像上设置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>by default, 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 now aligned with the top of the image, not by changing the marker alignment, but by changing the image alignment.</li>
</ol>

相关问题