HTML怎么让ol列表在移动端横向滑动-html教程-PHP中文网

ol元素默认垂直布局，需用flex+white-space实现横向滚动；设display: flex、overflow-x: auto，并为li加flex-shrink: 0和white-space: nowrap；ios需加-webkit-overflow-scrolling: touch；原生序号消失时用counter-reset/increment恢复。

html怎么让ol列表在移动端横向滑动

ol元素默认不支持横向滚动，必须用CSS强制改写布局

HTML的<ol></ol>天生是垂直流式布局，移动端不会自动变成横向滑动。直接加overflow-x: auto没用——因为子项<li>仍按块级元素换行堆叠，容器宽度还是撑满父容器，根本没“可滚动内容”。关键得先让<li>不换行、并排排列，再暴露横向溢出。

用flex + white-space实现横向排列+防换行

最稳的组合是给<ol></ol>设display: flex，再控制<li>为flex-shrink: 0（防止被压缩）和white-space: nowrap（防文字折行影响宽度）。别用inline-block——它受空白符影响，间隙难控；也别只靠float，清理浮动在flex时代已过时。

<ol class="horizontal-list">
<li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

.horizontal-list {<br>  display: flex;<br>  overflow-x: auto;<br>  scroll-behavior: smooth;<br>  -webkit-overflow-scrolling: touch; /* iOS惯性滚动 */<br>}<br>.horizontal-list li {<br>  flex-shrink: 0;<br>  white-space: nowrap;<br>  padding: 0 12px;<br>}

-webkit-overflow-scrolling: touch必须加，否则iOS上滚动卡顿、无惯性
去掉<ol></ol>默认的padding-left，否则左侧留白过大
如果<li>内有图片或复杂结构，确保它们宽度固定或max-width: 100%，否则会撑破布局

序号丢失？用counter-reset + counter-increment手动补

flex布局下<ol></ol>的原生序号（1. 2. 3.）会消失——因为<li>脱离了文档流的计数上下文。得用CSS计数器自己实现：

Html2md

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

下载

.horizontal-list {<br>  counter-reset: item;<br>}<br>.horizontal-list li {<br>  counter-increment: item;<br relative>}<br>.horizontal-list li::before {<br>  content: counters(item, ".") ". ";<br>  position: absolute;<br>  left: -24px;<br>}