CSS方向RTL元件顺序问题

我有这样的HTML：CSS方向RTL元件顺序问题

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

来源

2010-03-30 Jacek Kołodziejczyk

试试这个：

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

这给了我想要的东西。

来源

2010-03-30 15:15:07 brainjam

谢谢，它的工作 – 2010-03-30 17:26:34

谢谢。我有我的div style = inline。一旦我改变它内联块它的工作。再次谢谢你。 – moeabdol 2015-08-07 16:39:22

变化inline-block的内联柔性

<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 &浏览器，但不显示在IE浏览器。

来源

2013-11-07 18:17:47 Khattab

对我来说，它的工作，但我害怕打破其他东西....我运行任何测试来验证？ – 2017-03-14 13:09:24

CSS方向RTL元件顺序问题

回答

相关问题