显示：表格单元格未与行号对齐

Question

我一直在尝试构建一个显示带有行号的代码块的 html 页面。我使用 CSS 表格单元格显示属性以单元格格式显示该行以及行号。但是该行显示在行号之后，我希望它在同一行中对齐。 CSS Grid 显示可以正常工作，但是 Chrome 不支持超过 1000 行。请帮我解决这个问题。

pre {
  counter-reset: line 0;
  display: table-cell;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: 1em;
  gap: 0.3em;
}

.line-number {
  text-align: right;
}

.line-number::before {
  counter-increment: line;
  content: counter(line);
  white-space: pre;
  color: #888;
  padding: 0 .5em;
  border-right: 1px solid #ddd;
}

<pre>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
</pre>

Answer 1

您应该将 display: table 设置为容器标签（在您的情况下它是 pre），并将 display: table-cell 设置为子跨度