10

我有一个简单的 HTML 无序列表

<ul>
    <li><a href="#">link1</a> <a href="#">link2</a> text1</li>
    <li>text1 <a href="#">link</a></li>
    <li>text1 text2</li>
</ul>

如果我有 normaln ltr 布局，最终内容看起来像这样

链接1 链接2文本1
文本1链接
文本1 文本2

但是，如果列表项中的内容是混合的，并且方向设置为 rtl，我会变得一团糟

链接2文本1 链接1文本1
链接文本
2 文本1

这意味着只有包含文本的列表元素才能正确反转。关于如何使其正常工作的任何想法？

编辑：似乎内容流取决于实际内容。像这样的简单示例不起作用

<ul dir="rtl">
  <li>
    <a href="#">12:30 - 13:30</a>
    some text
    <a href="#">link text</a>
  </li>
</ul>
<ul dir="ltr">
  <li>
    <a href="#">12:30 - 13:30</a>
    some text
    <a href="#">link text</a>
  </li>
</ul>
4

3 回答 3

22

它开箱即用

属性dir="RTL"

使用您的标记仅将内容定位在右侧

  <div dir="RTL">
    <ul>
      <li><a href="#">My Web Home Site</a> <a href="#">My Other Web Site</a> My First Text</li>
      <li>My First Text <a href="#">My First Link</a></li>
      <li>My First Text, My Second text</li>
    </ul>
  </div>
  
  <hr/>
  
  <div dir="LTR">
    <ul>
      <li><a href="#">My Web Home Site</a> <a href="#">My Other Web Site</a> My First Text</li>
      <li>My First Text <a href="#">My First Link</a></li>
      <li>My First Text, My Second text</li>
    </ul>
  </div>

这完全取决于您如何编写内容，更多信息在这里

于 2011-03-09T11:17:08.467 回答
7

你可以为阿拉伯语设置这个 Html/CSS 样式

"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>مرحبا بك و اهلا و سهلا </li></ol>"
于 2018-05-13T08:29:49.523 回答
-1

如果“dir”在页面上不起作用，只需使用以下命令：

style="text-align: right;

对于示例“li”标签：

<ul>
<li style="text-align: right;">
blah blah....
</li>
...
</ul>
于 2016-02-29T07:04:24.470 回答