Question

我有这个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元素结构（虽然可以改变元素的类型）？

Answer 1

试试这个：

<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

Answer 2

将内联块更改为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＆amp;中显示。 Chrome，但不在IE中。

css方向rtl元素顺序问题

2 个答案: