如何将`<ol>`标签的序号垂直对齐到顶部？

Question

我想要将我的<ol>数字垂直对齐到顶部。这是CodePen的示例代码。

ol {
  list-style-type: decimal-leading-zero;
  font-size: 11px;
}

a {
  font-size: 80px;
  text-decoration: none;
}

<nav>
  <ol>
    <li><a href="#">Header One</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Two</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Three</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Four</a><span>This is some text, don't move me</span></li>
  </ol>
</nav>

- birdyoung

---

但是在代码片段中，我看到您的代码运行良好。 - Umutambyi Gad

将来，::marker 伪元素将让您非常轻松地解决此问题，但是目前 浏览器支持 还相当不稳定。 - Toastrackenigma

数字目前在底部，我希望它在顶部。 - birdyoung

我不确定这是可能的。但我知道你可能不应该这样做。底部对齐是标准和预期的。 - see sharper

Answer 1

你可以通过设置CSS属性counter-reset和counter-increment，使用每个li元素的before伪元素来显示一个自定义计数器。使用vertical-align: top并调整line-height可以将计数器对齐到文本顶部。

演示：

ol {
  list-style: none;
  counter-reset: items;
  font-size: 11px;
}

ol li {
  counter-increment: items;
}

ol li:before {
  vertical-align: top;
  line-height: 45px;
}

ol li:before {
  content: "0" counter(items) ". ";
}

ol li:nth-child(n+10):before {
  content: counter(items) ". ";
}

a {
  font-size: 80px;
  text-decoration: none;
}

<nav>
  <ol>
    <li><a href="#">Header One</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Two</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Three</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Four</a><span>This is some text, don't move me</span></li>
  </ol>
</nav>

- Unmitigated

---

一个不错的解决方案，但我认为可以更简单地完成，不需要计数器。请看我的答案。 - Nate G

Answer 2

如果问题出现在高的锚元素上，你可以将vertical-align:top应用于anchor标签。这样就可以解决问题了。您可能需要调整<a>标签上的line-height，并在<li>上设置line-height和margin以使其看起来正确。如果我理解您的意图正确，您可能还想在<span>上放置vertical-align:bottom。但是根据您的CodePen，我认为这将帮助您获得所需的效果。 这是我的CodePen分支。

ol {
  list-style-type: decimal-leading-zero;
  font-size: 11px;
  width: 300px;
}

li {
  margin: .6em 0;
  line-height: 1.6;
}

a {
  font-size: 80px;
  text-decoration: none;
  vertical-align: top;
  line-height: .8;
}

span {
  vertical-align: bottom;
}

<nav>
  <ol>
    <li><a href="#">Header One</a><span>This is some text, don't move me. Also, let's see how this looks if the line is long and there is more than one. And what if there's more text outside the span tag? </span> And what if there's more text outside the
      span tag? In that case, just make sure that the span and the li tag have the same line height.</li>
    <li><a href="#">Header Two</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Three</a><span>This is some text, don't move me</span></li>
    <li><a href="#">Header Four</a><span>This is some text, don't move me</span></li>
  </ol>
</nav>

- Nate G

Answer 3

浮动块在行号方面实际上被视为没有高度，因此如果您将<li>的内容包装在<div>中，然后将其向左浮动，那么行号将位于该div上方。然后，我们只需要使用一个clearfix来使浮动的div实际上占用空间，并确保下面的项目出现在下方，而不是前一个项目的右侧。

ol {
  list-style-type: decimal-leading-zero;
  font-size: 11px;
}

a {
  font-size: 80px;
  text-decoration: none;
}

.listContent {
  float: left;
}

/** Clearfix **/
li {
  content: "";
  clear: both;
}

<nav>
  <ol>    
    <li><div class="listContent"><a href="#">Header Two</a><span>This is some text, don't move me</span></div></li>
    <li><div class="listContent"><a href="#">Header Three</a><span>This is some text, don't move me</span></div></li>
    <li><div class="listContent"><a href="#">Header Four</a><span>This is some text, don't move me</span></div></li>
  </ol>
</nav>

在未来，您将能够使用::marker伪元素仅应用于标记符号（例如列表的编号或符号）的特定样式。据我所知，仅需这么简单：

---

li::marker {
    vertical-align: top;
}

但是，在撰写本文时，这仍处于获得浏览器支持的早期阶段 -- 您可以在此处查看支持矩阵。

- Toastrackenigma

Answer 4

由于::marker锚定在li内部的元素上，因此为了对齐::marker，您需要对齐li内部的元素。

li {
    width: 350px;
}

div {
    display: inline-block;
    vertical-align: top;
}

<ol>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua... 
        </div>
    </li>
</ol>

- almaceleste