如何用HTML实现阿拉伯语有序列表的双列显示

我之前也碰到过一模一样的情况——给有序列表设置dir="rtl"后，原来的float双列布局直接乱掉了。这其实是因为文本方向改变后，float: left的行为逻辑也跟着反转了，再加上有序列表的编号位置会自动调整，导致整个布局的对齐完全混乱。

问题根源 #

当你给<ol>设置dir="rtl"时，容器的文本流方向变成从右到左，原本的float: left会让列表项向容器的右侧浮动，而不是左侧，这就打破了原来的双列排列逻辑，同时列表编号会跑到内容的右侧（RTL语境下的“外侧”），视觉上完全错位。

推荐解决方案：用CSS Grid实现（现代且稳定） #

CSS Grid天生支持RTL布局，不需要额外调整浮动逻辑，代码更简洁，布局也更可靠：

HTML代码

<h1>قائمة العناصر</h1>
<div class="wrapper">
  <ol dir="rtl">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
    <li>عنصر 4</li>
    <li>عنصر 5</li>
    <li>عنصر 6</li>
  </ol>
</div>

CSS代码

div.wrapper {
  margin-bottom: 1em;
}

ol {
  width: 30em;
  padding: 0;
  /* 启用Grid布局，设置两列等宽 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 可选：增加列和行之间的间距，提升可读性 */
  gap: 0.8em;
  /* 让编号和内容一起靠右，适配RTL的视觉逻辑 */
  list-style-position: inside;
}

/* 不需要float属性了，Grid会自动处理排列 */
ol li {
  /* 可以根据需求添加内边距、背景等样式 */
  padding: 0.3em;
}

为什么这个方案有效？ #

• Grid布局完全不受文本方向影响，设置dir="rtl"后，列表项会自动按照从右到左、从上到下的顺序排列，完美适配阿拉伯语的阅读习惯。
• list-style-position: inside让有序列表的编号和内容保持在同一侧，避免编号跑到容器外侧的问题。
• 不需要手动处理清除浮动，也不会出现因列表项高度不一致导致的布局错位。

备选方案：调整浮动逻辑（兼容旧浏览器） #

如果需要兼容不支持Grid的旧浏览器，可以修改浮动方向，同时调整文本方向的细节：

div.wrapper {
  margin-bottom: 1em;
}

ol {
  width: 30em;
  direction: rtl;
  padding: 0;
  list-style-position: inside;
}

ol li {
  /* RTL下改用float: right，让列表项从右侧开始排列 */
  float: right;
  width: 10em;
  margin: 0 0 0.5em 0.5em;
}

br {
  /* 清除浮动，确保容器高度正确 */
  clear: both;
}

不过这种方式需要手动处理浮动清除，而且当列表项高度不同时容易出现布局错乱，所以优先推荐Grid方案。

内容的提问来源于stack exchange，提问作者J. Doe