CSS方向rtl元素顺序问题

Question

CSS方向rtl元素顺序问题

7

I have this 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元素结构（尽管元素的类型可以更改）？

- Jacek Kołodziejczyk

2个回答

2

将inline-block更改为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>

这段代码在Firefox和Chrome中可以正常显示，但是在IE中却无法正常显示。

- Khattab

对我来说它是工作的，但我担心会破坏其他东西... 我需要运行任何测试来验证吗？ - Kushal Jayswal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brainjam · Accepted Answer

试试这个：

<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