无法使用外部CSS/head样式时，如何用内联样式创建HTML有序水平列表？

我明白你的困境——在CMS里没法加外部样式或修改head，只能靠inline CSS来搞定。你之前的问题出在list-style: none直接把默认编号藏了，哪怕加了type="a"也发挥不了作用。这里给你两个纯inline CSS的解决方案，都能实现带编号的水平有序列表：

方案1：用Flex布局（推荐，现代浏览器友好） #

利用Flex来让列表项水平排列，同时保留默认的编号样式，调整编号位置避免换行：

<ol type="a" style="padding-left: 0; display: flex; gap: 25px; align-items: center;">
  <li style="list-style-position: inside; margin: 0;">你的第一项内容</li>
  <li style="list-style-position: inside; margin: 0;">你的第二项内容</li>
  <li style="list-style-position: inside; margin: 0;">你的第三项内容</li>
</ol>

• display: flex：让<ol>的子元素（也就是<li>）水平排列
• gap: 25px：控制列表项之间的间距，可根据需求调整
• list-style-position: inside：让编号和列表内容在同一行显示，不会单独占左边的缩进空间
• type="a"：指定编号为小写字母，换成type="1"就是数字，type="A"是大写字母，按需选择

方案2：兼容旧浏览器的inline-block写法 #

如果需要兼容更老的浏览器（比如IE10及以下），可以用inline-block替代Flex：

<ol type="a" style="padding-left: 0; white-space: nowrap; overflow-x: auto;">
  <li style="display: inline-block; list-style-position: inside; margin-right: 25px;">第一项内容</li>
  <li style="display: inline-block; list-style-position: inside; margin-right: 25px;">第二项内容</li>
  <li style="display: inline-block; list-style-position: inside;">第三项内容</li>
</ol>

• white-space: nowrap：强制列表项不换行
• overflow-x: auto：如果列表太长，会出现横向滚动条
• display: inline-block：让列表项在同一行显示，同时保留块级元素的特性

这两个方案都完全不需要外部CSS或head里的样式块，纯inline就能实现你要的效果，而且编号会自动跟随列表项的顺序，不用手动写编号。

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