HTML list content direction in rtl
I have a simple HTML unordered list
<ul>
<li><a href="#">link1</a> <a hr开发者_运维技巧ef="#">link2</a> text1</li>
<li>text1 <a href="#">link</a></li>
<li>text1 text2</li>
</ul>
If I have normaln ltr layout, final content looks like this
link1 link2 text1
text1 link text1 text2However, if the content inside a list item is mixed, and direction is set to rtl, I get a complete mess
link2 text1 link1
text1 link text2 text1which means only the list element containing text only gets reversed properly. Any ideas on how to get this working correctly?
edit: It seems that the content flow depends on the actual content. A simple example like this doesn't 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>
It works out of the box
The attribute dir="RTL"
using your markup only position the content at the right side
<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>
It's all a matter of how you write your content, more information here
you could this Html/CSS styling for Arabic Language
"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>مرحبا بك و اهلا و سهلا </li></ol>"
If "dir" does not work on the page, just use this:
style="text-align: right;
For a sample "li" tag:
<ul>
<li style="text-align: right;">
blah blah....
</li>
...
</ul>
精彩评论