本文介绍如何通过 CSS 的 direction: rtl 配合 inline-block 布局，使 HTML 元素（如表格）按从右至左顺序水平排列，特别适用于阿拉伯语等 RTL 语言内容的排版需求。
本文介绍如何通过 css 的 `direction: rtl` 配合 `inline-block` 布局，使 html 元素（如表格）按从右至左顺序水平排列，特别适用于阿拉伯语等 rtl 语言内容的排版需求。
在多语言网页开发中，当页面主体为阿拉伯语、希伯来语等从右向左（RTL）书写的语言时，若需将多个块级元素（如 <table>）水平并列显示，直接使用 float 或 flexbox 可能导致语义错乱或对齐异常。此时，利用 CSS 的 direction 属性控制文本流方向，是最符合语义且兼容性良好的解决方案。
核心思路是：将容器设为 direction: rtl，使其内部 inline-block 子元素自然从右向左排列；同时，对子元素内部的 LTR 内容（如英文文本）重置为 direction: ltr，确保语言内容本身正确显示。
以下为完整实现示例：
<div class="glossed">
<span>
<table>
<tr><td>(ar) نَعْبُدُ</td></tr>
<tr><td>(en) We worship</td></tr>
</table>
</span>
<span>
<table>
<tr><td>(ar) إِيَّاكَ</td></tr>
<tr><td>(en) you alone</td></tr>
</table>
</span>
</div>对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.glossed {
direction: rtl; /* 整体容器右对齐、子元素 RTL 流式布局 */
font-family: 'Segoe UI', sans-serif;
}
.glossed > span {
display: inline-block; /* 使 span 成为可平铺的行内块 */
margin: 0 8px; /* 可选：添加间距 */
}
.glossed table {
border-collapse: collapse;
text-align: center;
min-width: 120px;
}
.glossed tr + tr {
direction: ltr; /* 重置第二行及之后的行（英文内容）为 LTR */
}
/* 更精确的做法：仅对英文单元格应用 ltr */
.glossed td:nth-child(2) {
direction: ltr;
text-align: left;
}✅ 关键要点说明：
- direction: rtl 作用于容器时，会改变 行内格式化上下文（IFC）中的盒排列顺序，inline-block 元素自动从右向左依次排列；
- 不推荐用 flex-direction: row-reverse 替代——它仅反转视觉顺序，不改变逻辑阅读流，影响可访问性（如屏幕阅读器）、键盘导航及 :first-child 等伪类行为；
- 若使用 dir="rtl" HTML 属性（如 <div class="glossed" dir="rtl">），语义更清晰，且支持无样式降级；CSS 中设置 direction 更适合动态主题切换场景；
- 对混合语言内容，应逐层控制 direction：容器 RTL → 表格整体居中 → 英文行/单元格显式设为 ltr，避免双向文本（BIDI）渲染异常。
? 进阶建议：
现代项目中，若需更高灵活性（如响应式换行、对齐控制），可在保持 direction: rtl 的基础上，配合 display: flex 与 flex-direction: row-reverse，但务必同步设置 unicode-bidi: plaintext 或使用 dir 属性保障语义正确性。不过对于纯水平平铺需求，原生 direction + inline-block 方案简洁、可靠、零 JS 依赖，是 RTL 多语种排版的推荐实践。
