HTML中ol列表怎么实现并排？双列结构搭建技巧-html教程-PHP中文网

要实现双列有序列表，需禁用ol默认序号，用css计数器+li::before重绘，并采用display: grid布局；移动端应通过媒体查询切换为flex-direction: column以确保适配。

html中ol列表怎么实现并排？双列结构搭建技巧

ol 默认是垂直堆叠的，没法直接“并排”

HTML 的 <ol></ol> 语义是**有序序列**，浏览器默认把它当单列流式内容渲染。你写 column-count: 2 或 display: flex 到 <ol></ol> 上，看似能分栏或横排，但会立刻暴露两个问题：序号错乱、换行对齐崩溃。这不是 CSS 写得不对，而是 <ol></ol> 的计数器和布局模型不兼容这些方式——尤其 column-count 会把一个 <li> 拆到两列里，序号只在第一列显示，第二列空白。

真要双列，得放弃 ol 的原生序号渲染逻辑

如果你只要视觉上“看起来像两列有序列表”，且接受手动控制编号，最稳路径是：关掉 <ol></ol> 的默认序号，用 CSS 计数器 + li::before 重绘，并配合 display: grid 布局。关键点：

ol { list-style: none; padding-left: 0; counter-reset: item; }
li { counter-increment: item; }
li::before { content: counter(item) ". "; }
ol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

注意：别用 flex-wrap 做双列，它会让序号和文字基线错位（尤其字体变化时）；也别给 li 设 width: 50%，它不响应内容长度，容易撑破或留空隙。

移动端适配必须加 `flex-direction: column` 而不是改列数

用 grid-template-columns: 1fr 1fr 在小屏下不会自动回退为单列——它只会把两列压得极窄甚至文字换行溢出。正确做法是媒体查询中切换布局模型：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  ol {
    display: flex;
    flex-direction: column;
  }
}

这里不用 grid-template-columns: 1fr，因为 1fr 在单列 grid 里仍保留 grid 容器行为，而 flex-direction: column 更轻量、更可控，且避免 Safari 对小屏 grid 的渲染抖动。另外，counter() 在 flex 下完全正常，序号不会断。