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，它似乎已将第二个列表上的数字从底部对齐移到顶部对齐。我想要的地方。

感谢所有提供帮助的人！

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

Answer 2

我认为这是控制此格式的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，它似乎已将第二个列表上的数字从底部对齐移到顶部对齐。我想要的地方。

感谢所有提供帮助的人！

Answer 3

我已经通过一个非常简单的技巧实现了这一目标

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>

CSS列表项垂直对齐

3 个答案: