Направление содержимого списка HTML в RTL - PullRequest
Новая
       0

Направление содержимого списка HTML в RTL

3 голосов
/ 09 марта 2011

У меня есть простой неупорядоченный список 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, конечный контент будет выглядеть так

ссылка1 ссылка2 текст1
text1 ссылка
text1 text2

Тем не менее, если содержимое внутри элемента списка смешано, а для параметра direction установлено значение rtl, я получаю полный беспорядок

ссылка2 текст1 ссылка1
text1 ссылка
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>

Ответы [ 3 ]

12 голосов
/ 09 марта 2011

Работает из коробки

Атрибут 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>

Все зависит от того, как вы пишете свой контент, дополнительную информацию здесь

2 голосов
/ 13 мая 2018

Вы могли бы это Html / CSS для арабского языка 

"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>مرحبا بك و اهلا و سهلا </li></ol>"
0 голосов
/ 29 февраля 2016

Если «dir» не работает на странице, просто используйте это: 

style="text-align: right;

Для примера тега «li»: 

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