Html 如何更改OL列表中数字的位置？
这是我正在处理的OL列表的HTML。它应该有图像，但我不知道如何在这里添加它们。我想做的是让数字显示在图像的上方，而不是下方。他们的默认位置似乎是左下角。我希望他们出现在左上方。我试着把边距弄乱，甚至是填充物。似乎什么都不管用 这几乎只是我正在进行的一个小项目的一部分，我想我会对一些网站进行反向工程，看看我是否可以自己复制它们，而不用看它们的任何代码Html 如何更改OL列表中数字的位置？,html,css,image,list,html-lists,Html,Css,Image,List,Html Lists,这是我正在处理的OL列表的HTML。它应该有图像，但我不知道如何在这里添加它们。我想做的是让数字显示在图像的上方，而不是下方。他们的默认位置似乎是左下角。我希望他们出现在左上方。我试着把边距弄乱，甚至是填充物。似乎什么都不管用 这几乎只是我正在进行的一个小项目的一部分，我想我会对一些网站进行反向工程，看看我是否可以自己复制它们，而不用看它们的任何代码 <!DOCTYPE html> <head><title></title> <lin
<!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>
您可以设置
垂直对齐：顶部到img
元素
以下是一个工作示例：
ol.mostPopGames{
左边距：0；
右边距：0；
列表样式类型：无；
}
莫斯特波普利{
计数器增量：步进计数器；
}
在之前{
内容：计数器（步进计数器）；
右边距：5px；
字体大小：100%；
字体大小：粗体；
填充：3px 8px；}
列表图像{
宽度：20%；
身高：20%；
}
mostPopGames先生{
垂直对齐：顶部；
}
您可以设置垂直对齐：顶部到img
元素
以下是一个工作示例：
ol.mostPopGames{
左边距：0；
右边距：0；
列表样式类型：无；
}
莫斯特波普利{
计数器增量：步进计数器；
}
在之前{
内容：计数器（步进计数器）；
右边距：5px；
字体大小：100%；
字体大小：粗体；
填充：3px 8px；}
列表图像{
宽度：20%；
身高：20%；
}
mostPopGames先生{
垂直对齐：顶部；
}
测试了Dekel编写的代码片段，似乎计数器仍然显示在左下角
因此，除此之外，您可以将计数器的位置设置为绝对，并将其设置为0。通过这样做，您需要为实际图像添加边距，以将其推到计数器的右侧
ol.mostPopGames{
左边距：0；
右边距：0；
列表样式类型：无；
}
莫斯特波普利{
位置：相对位置；
计数器增量：步进计数器；
}
在之前{
位置：绝对位置；
内容：计数器（步进计数器）；
右边距：5px；
字体大小：100%；
字体大小：粗体；
填充：3px8px；
排名：0；
}
列表图像{
宽度：20%；
身高：20%；
左边距：25px；
}
mostPopGames.mostPopGames li{
垂直对齐：顶部；
}
测试了Dekel编写的代码片段，似乎计数器仍然显示在左下角
因此，除此之外，您可以将计数器的位置设置为绝对，并将其设置为0。通过这样做，您需要为实际图像添加边距，以将其推到计数器的右侧
ol.mostPopGames{
左边距：0；
右边距：0；
列表样式类型：无；
}
莫斯特波普利{
位置：相对位置；
计数器增量：步进计数器；
}
在之前{
位置：绝对位置；
内容：计数器（步进计数器）；
右边距：5px；
字体大小：100%；
字体大小：粗体；
填充：3px8px；
排名：0；
}
列表图像{
宽度：20%；
身高：20%；
左边距：25px；
}
mostPopGames.mostPopGames li{
垂直对齐：顶部；
}
hmm，实际上也有同样的问题。该数字仍显示在图像的左下角。进行了一些编辑后出现了一些问题。现在检查：）嗯，实际上也有同样的问题。该数字仍显示在图像的左下角。进行了一些编辑后出现了一些问题。现在检查：）在我的示例中，由于多次编辑，css中出现了一个问题。你现在可以检查了，一切正常…看到了你的最新答案。更好更简单的解决方案。好的，这两种方法都很有效。它也可以通过放置垂直对齐：顶部；在ol.mostPopGames li:：before{}部分中，由于多次编辑，我的示例中的css出现了问题。你现在可以检查了，一切正常…看到了你的最新答案。更好更简单的解决方案。好的，这两种方法都很有效。它也可以通过放置垂直对齐：顶部；在ol.mostPopGames li：：before{}部分…你检查了我的答案吗？你检查了我的答案吗？
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%;}