开发者

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 text2

However, 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 text1

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜