css direction проблема порядка элементов rtl - PullRequest
Новая
       12

css direction проблема порядка элементов rtl

6 голосов
/ 30 марта 2010

У меня есть этот HTML: 

<body style="direction: rtl">
    <div style="display:inline-block">
        <span>x:</span> <span>1</span>, 
        <span>y:</span> <span>2</span> |  
        <a>link1</a> | 
    </div>
    <a>link2</a>
</body>

С направлением: ltr отображает: 

x: 1, y: 2 | link1 | link2

Но когда я изменяю его на RTL, это показывает: 

link2 | x: 1, y: 2 | link1

пока я ожидаю: 

link2 | link1 | 2 :y ,1 :x

Есть ли способ установить свойства css для достижения ожидаемого результата без изменения структуры элементов DOM (хотя типы элементов могут быть изменены)?

Ответы [ 2 ]

7 голосов
/ 30 марта 2010

Попробуйте это: 

<body style="direction: rtl">
    <div style="display:inline-block">
        <span dir="rtl">x:</span> <span dir="rtl">1</span>, 
        <span dir="rtl">y:</span> <span dir="rtl">2</span> |  
        <a>link1</a> | 
    </div>
    <a>link2</a>
</body>

Это дало мне то, что вы хотели.

Полезные ссылки: http://www.i18nguy.com/markup/right-to-left.html и http://www.w3.org/TR/html401/struct/dirlang.html

1 голос
/ 07 ноября 2013

изменить встроенный блок на inline-flex 

<body style="direction: rtl">
    <div style="display:inline-flex">
        <span>x:</span> <span>1</span>, 
        <span>y:</span> <span>2</span> |  
        <a>link1</a> | 
    </div>
    <a>link2</a>
</body>

Это будет отображаться как вы хотите в FF & Chrome, но не в IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...