因为 和 默认是块级元素，每个 独占一行，垂直堆叠是浏览器依据 UA 样式表预设 display: block 的规范行为；水平排列需将 改为 inline-block 或 flex 子项，并清除 padding、margin、list-style 干扰。
ol列表项为什么默认垂直堆叠？
因为 <ol></ol> 和 <li> 默认是块级元素，每个 <li> 会独占一行。即使 HTML 源码里写成 <li>A</li>
<li>B</li> 紧挨着，浏览器仍按块级语义渲染为上下排列——这不是 bug，是规范行为。
让 ol 中的 li 水平排列的最小可行方案
核心是把 <li> 从块级转为行内或弹性子项，同时处理默认 margin 和 list-style 的干扰：
- 给
<ol></ol>设display: flex，并移除默认 padding：padding-left: 0 - 给
<li>设display: inline-block或flex: none，并清除左侧 margin（margin-left: 0） - 必须显式重置
list-style: none，否则序号会错位或重叠 - 若需保留数字序号，用
counter-reset+::before手动实现更可控
常见失效原因：空白符和 box-sizing
即使加了 display: inline-block，<li> 之间仍可能换行，往往是因为：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- HTML 源码中
<li>标签间的换行/空格被解析为文本节点，产生约 4px 间隙——删空格、用注释<!-- -->隔开，或设font-size: 0在父<ol></ol>上再重置子元素字体 -
<li>默认box-sizing: content-box，但若全局重置过* { box-sizing: border-box }，又没配padding，序号可能被裁剪——检查 computed styles 中的box-sizing和padding-left - 某些 CSS 框架（如 Bootstrap）对
<ol></ol>有额外margin-bottom，需手动覆盖
contenteditable 场景下如何防止用户按 Enter 插入新行
如果 <ol></ol> 或其 <li> 设了 contenteditable="true"，用户按 Enter 会插入 <div> 或换行符，DOM 结构立刻变复杂，CSS 水平布局彻底失效：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>监听 <code>keydown，对 e.key === 'Enter' 调用 e.preventDefault()
paste，用 e.clipboardData.getData('text/plain') 提取纯文本，并 .replace(/[\r\n]/g, '') 清除所有换行符<li> 加 -webkit-appearance: none，否则光标定位异常真正难的不是视觉上“看起来没换行”，而是阻止换行行为进入 DOM；一旦插入了块级节点，display: flex 就只管容器，不管内部结构了。
