顯示：表格單元格與行號不對齊

Question

我一直在嘗試構建一個顯示帶有行號的代碼塊的 html 頁面。 我已經使用 CSS table-cell display 屬性以單元格格式顯示行和行號。 但是該行顯示在行號之后，我希望它在同一行中對齊。 CSS 網格顯示可以正常工作，但是在 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設置為子跨度