Question

这是我正在处理的OL列表的HTML。它应该有图像，但我不知道如何在这里添加它们。我想要做的是让数字显示在图像的上方，而不是下方。他们的默认位置似乎是左下角。我希望它们出现在左上角。我试着弄乱边缘，甚至是填充物。似乎没什么用。

这几乎只是我正在努力的一个小项目的一部分我想我会去一些网站进行逆向工程，看看我是否可以自己制作这些网站的副本，而不用看他们的任何网站代码。

 <!DOCTYPE html>
 <head><title></title>

 <link rel="stylesheet" type="text/css" href="stylesheet.css">

 </head>
 <body>
 <ol class="mostPopGames">

 <li class="popGames"><img class="listImage" src="images/homepage    /featuredContent/340706.png"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage  /featuredContent/itachi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/kakashi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/tsunade.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/340706.png"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/itachi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/kakashi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/tsunade.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/340706.png"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/itachi.jpg"/></li>
 </ol>
 </body>
 </html>

这是CSS ...

 ol.mostPopGames{
 margin-left: 0;
 margin-right: 0;
 list-style-type: none;
 }

 ol.mostPopGames li{
 counter-increment: step-counter;}


 ol.mostPopGames li::before{
 content: counter(step-counter);
 margin-right: 5px; 
 font-size: 100%;
 font-weight: bold; 
 padding: 3px 8px;}

 img.listImage{
 width: 20%;
 height: 20%;}

Answer 1

您可以将vertical-align: top;设置为img元素。

这是一个有效的例子：

＆＃13;

ol.mostPopGames{
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
}

ol.mostPopGames li{
  counter-increment: step-counter;
}
ol.mostPopGames li::before{
  content: counter(step-counter);
  margin-right: 5px; 
  font-size: 100%;
  font-weight: bold; 
  padding: 3px 8px;}

img.listImage{
  width: 20%;
  height: 20%;
}
.mostPopGames li img {
  vertical-align: top;  
}

＆＃13;

<ol class="mostPopGames">
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/FF0000/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/00FF00/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/0000FF/fff"/></li>
</ol>

＆＃13;

Answer 2

Dekel对该片段进行了测试，看起来计数器仍然出现在左下方。

因此，您可以将计数器的位置设置为绝对值并将其设置为0.通过执行此操作，您需要为实际图像添加边距以将其推送到计数器的右侧。

ol.mostPopGames{
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
}

ol.mostPopGames li{
  position: relative;
  counter-increment: step-counter;
}
ol.mostPopGames li::before{
  position: absolute;
  content: counter(step-counter);
  margin-right: 5px; 
  font-size: 100%;
  font-weight: bold; 
  padding: 3px 8px;
  top: 0;
}

img.listImage{
  width: 20%;
  height: 20%;
  margin-left: 25px;
}
mostPopGames.mostPopGames li {
  vertical-align: top;  
}

<ol class="mostPopGames">
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/FF0000/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/00FF00/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/0000FF/fff"/></li>
</ol>

如何更改OL列表中数字的位置？

2 个答案: