css - CSS 列表项垂直对齐

Question

我今天遇到了一个我认为是我以前从未见过的 CSS 问题：

这是两个单独的有序列表。在第二个列表中，数字 1 与项目符号点的底部对齐，而不是与顶部对齐，这是我以前见过的唯一方式（这也是我想要的）。

这两个列表的代码是相同的，除了第一个没有锚标记，而第二个有：

这是 WordPress 网站上一篇文章的一部分，这个主题的主要 CSS 文件在未缩小时有数千行，因此对我来说有点不知所措。

由于我从未见过像这样格式化的项目符号，甚至不知道它可以完成，任何人都可以指出我应该在 CSS 文件中寻找什么 CSS 功能，以便我可以将数字与相关联的顶部对齐文本？

谢谢！

==========

更新：

我认为这是控制这种格式的 CSS 块：

body.single .single-inner-wrapper article#single-article .entry-content a {
    color: #41b5f9;
    position: relative;
    line-height: 1.2;
    display: inline-block;
    z-index: 1
}

感谢 G-Cyr 的建议，我在此部分添加了一个垂直对齐：顶部，它似乎已将第二个列表中的数字从底部对齐移动到顶部对齐。我想要的地方。

感谢所有帮助过的人！

标签： cssvertical-alignmentlistitem

Answer 1

来自MDN：

CSS 计数器可让您根据内容在文档中的位置调整内容的外观。

这是一个简短的示例，展示了如何使用它。

• 设置默认list-style为none
• 始终重置父元素中的计数器
• 增加每个中的计数器编号li
• 确保li相对定位
• 存储实际数字加上“。” 在伪元素中content
• 仅显示lis 的非空数字
• 随心所欲的风格

.my-list {
  counter-reset: my-list-title;
  list-style: none;
  max-width: 400px;
}

.my-list li {
  counter-increment: my-list-title;
  position: relative;
}

.my-list li:not(:empty)::before {
  content: counter(my-list-title) ".";
  position: absolute;
  bottom: 0;
  left: -1.2em;
}

<ol class="my-list">
  <li>xxxx xxxx xxxxxxx xxxxxx xxxxx xxxxx xxxxxxx xxxxxx xxxxx xxxxx</li>
  <li>xxxx xxxx xxxxxxx xxxxxx</li>  
</ol>

jsFiddle