10

シンプルな 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 テキスト
1リンク
テキスト1 テキスト2

ただし、リスト項目内のコンテンツが混在していて、方向が rtl に設定されていると、完全に混乱します。

リンク2テキスト1 リンク
1 テキスト1リンク
テキスト2 テキスト1

これは、テキストのみを含むリスト要素のみが適切に反転されることを意味します。これを正しく機能させる方法についてのアイデアはありますか?

編集：コンテンツの流れは実際のコンテンツに依存しているようです. このような単純な例は機能しません

<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>
4

3 に答える 3

22

それは箱から出して動作します

属性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>

コンテンツの書き方がすべてです。詳細については、こちらをご覧ください。

于 2011-03-09T11:17:08.467 に答える
-1

ページで「dir」が機能しない場合は、これを使用してください。

style="text-align: right;

サンプルの「li」タグの場合:

<ul>
<li style="text-align: right;">
blah blah....
</li>
...
</ul>
于 2016-02-29T07:04:24.470 に答える