rtl中的HTML列表内容方向

Question

我有一个简单的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布局,最终内容看起来像这样

link1 link2 text1
text1 link
text1 text2

但是,如果列表项中的内容是混合的,并且方向设置为rtl,则会出现问题

link2 text1 link1
text1 link
text2 text1

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

编辑:内容流似乎取决于实际内容.像这样的简单例子不起作用

<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>

Answer 1

它开箱即用

属性 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>
  

这完全取决于您如何撰写内容,更多信息

Answer 2

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

"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>????? ?? ? ???? ? ???? </li></ol>"