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>

如果我的布局方向是从左到右(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>

- eagerMoose

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>
  

重要的是如何编写内容，更多信息请点击这里

- balexandre

Answer 2

您可以使用此HTML/CSS样式来为阿拉伯语进行排版。

"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>مرحبا بك و اهلا و سهلا </li></ol>"

- ali nada

Answer 3

如果页面上的“dir”无法工作，只需使用以下内容：

style="text-align: right;

对于一个示例的 "li" 标签：

<ul>
<li style="text-align: right;">
blah blah....
</li>
...
</ul>

- Mohsen Abasi