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提出的建议，我在这个部分添加了vertical-alignment:top，现在第二个列表中的数字已经从底部对齐变为顶部对齐，正是我想要的效果。

感谢所有帮助过我的人！

- Mark

---

尝试重新创建一个能够复制此代码的代码。 - Temani Afif

你可能在代码中的某个地方重置了<a>标签的display和vertical-align属性。请查看以下链接 https://jsfiddle.net/rynue9zL/ - G-Cyrillus

@G-Cyr inline-block 看起来单独使用就足够了。 - Temani Afif

G-Cyr，你的 jsfiddle 代码帮我解决了问题。我在 CSS 块中添加了 vertical-align:top，我认为它是控制这个问题的（inline-block 已经存在），现在格式已经修复了。 - Mark

Powell_v2，谢谢。这是一个有趣的方法，但我现在不确定我需要它。 - Mark

Answer 1

来自 MDN：

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

以下是一个简短的示例，展示了如何使用它：

• 将默认的 list-style 设置为 none
• 始终重置父元素中的计数器
• 在每个 li 中增加计数器数字
• 确保 li 具有相对定位
• 将实际数字和 "." 存储在伪元素 content 中
• 仅显示非空的 li 的数字
• 按您喜欢的方式进行样式设置

.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

- Andy Hoffman

---

Andy，那是一个有趣的技巧，谢谢。实际上，我的问题在于样式而不是编号，但我认为G-Cyr可能已经指出了正确的方向。 - Mark

@Mark Gotcha。下次我会更仔细地关注问题。 - Andy Hoffman

Answer 2

我用一种非常简单的技巧实现了这个。

https://codepen.io/h-sharma/pen/VwaJmPy

     <ol>
      <li>
       <div>
        Some text.....
       </div>
      </li>
     </ol>
     <style>
      li>div{
       display:inline-block;
       vertical-align:bottom;
      }
     </style>

li>div{
 display:inline-block;
 vertical-align:bottom;
}

<ol>
 <li>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,     
  </div>
 </li>
</ol>

- Hitesh

Answer 3

我认为这是控制此格式的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的建议，我在这个部分添加了vertical-alignment:top，现在第二个列表中的数字已经从底部对齐变为顶部对齐，正如我所希望的。

感谢所有提供帮助的人！

- Mark