link1 link2 text1

Direction of HTML list content in rtl

I have a simple unordered HTML list

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

If I have a normal ltr layout, the final content is as follows

link1 link2 text1
text1 link
text1 text2

However, if the content inside the list item is mixed and the direction is set to rtl, I get a complete mess

link2 text1 link1
text1 link
text2 text1

which means that only the list item containing the text is restored correctly. Any ideas on how to do this correctly?

edit: It seems that the content flow is dependent on the actual content. A simple example like this does not work

<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>
+3
source share
2 answers

Works out of the box

dir="RTL"

, ,

, ,

+8

"dir" , :

style="text-align: right;

"li":

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

All Articles