阿拉伯语 HTML 布局方向 css

Question

要将文本方向更改为从右到左，我们知道以下 CSS 代码：

direction:rtl; //displays text direction as right to left

在 css 中有什么方法可以将整个页面布局方向从右到左反转，包括列表？

Answer 1

你可以试试

body 
{direction:rtl;}

Answer 2

您最好的选择可能是使用类似于 Google's CSS Janus 的 CSS 处理器工具；这种类型的工具可以做几件事来将站点的 CSS 从从左到右方向翻转为从右到左方向，包括添加 direction:rtl，但也翻转 left/right 位置和大小值 - 因此，例如，DIV 放置在距其父级左边缘 4px 的位置，而不是放置在距右侧 4px 的位置。

这意味着您的网站最终会得到两个样式表：原始样式表用于从左到右的版本，处理后的版本用于从右到左的版本。

Answer 3

只要整个文档方向是从右到左，就将 dir="rtl" 添加到 html 标记。这设置了整个文档的基本方向。

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>

Answer 4

这将 RTL 页面中的所有内容：

body {
  margin: 50px;
  direction: rtl;
}

<p>معادن</p>
<ol>
  <li>ذهب</li>
  <li>فضة</li>
  <li>حديد</li>
</ol>

阿拉伯语 HTML 布局方向 css

Arabic HTML layout direction with css

html

css

layout