如何为居中的可回流HTML文档添加侧边行号？

Grid 是实现这个需求的优秀方案，无需 JavaScript 就能保留原布局的居中效果，同时完美嵌入行号。以下是具体实现思路和代码：

核心思路 #

1. 保留原布局的居中逻辑，但将内容和行号统一放入一个 Grid 容器中，避免破坏整体居中结构
2. 通过 Grid 列分配，让行号列自适应宽度，内容列保持原有的 30em 宽度，确保阅读体验一致
3. 用 Grid 的对齐和间距属性控制行号与内容的排版细节

完整实现代码 #

CSS #

body {
  padding: 2em;
}
.main-content {
  max-width: fit-content; /* 自适应行号+内容的总宽度 */
  margin: 0 auto; /* 保持整体居中 */
  display: grid;
  grid-template-columns: auto 30em; /* 行号列自适应，内容列固定原宽度 */
  column-gap: 1.5em; /* 行号与内容的间距 */
  align-items: start; /* 行号与段落顶部对齐 */
}
.line-number {
  text-align: right; /* 行号靠右，提升视觉对齐感 */
  padding-top: 0.25em; /* 匹配段落默认行高，避免错位 */
  color: #666; /* 行号弱化显示，不干扰正文 */
}
p {
  margin: 0 0 1.5em 0; /* 保留段落间的自然间距 */
  line-height: 1.6; /* 优化阅读行高 */
}

HTML #

<body>
  <div class="main-content">
    <span class="line-number">1</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante.</p>
    
    <span class="line-number">2</span>
    <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem.</p>
    
    <span class="line-number">3</span>
    <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor.</p>
  </div>
</body>

方案优势 #

• 保留原布局体验：内容列固定为 30em，和原布局的阅读宽度完全一致，超宽屏和移动端都能保持良好体验
• 无需 JS 计算：纯 CSS Grid 实现，布局更稳定，不依赖脚本
• 结构简洁：整个内容用一个容器包裹，避免冗余的嵌套 div
• 排版美观：行号靠右对齐，弱化显示，既满足需求又不干扰正文阅读

其他方案对比 #

• 行内插入行号：会破坏文本连续性，复制内容时会附带行号，不推荐用于需要复制的文本场景
• JS 计算边距：完全没必要，Grid 已经能精准控制列宽和居中，JS 方案反而增加复杂度和潜在兼容性问题

内容的提问来源于stack exchange，提问作者Tom Huntington