css direction rtl element order problem
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>
With direction: ltr it displays:
x: 1, y: 2 | link1 | link开发者_运维技巧2
But when I change it to rtl is shows:
link2 | x: 1, y: 2 | link1
while I would expect:
link2 | link1 | 2 :y ,1 :x
Is there a way to set css properties to achieve the expected result wihtout modifying the DOM elements structure (the types of the elements can be changed though)?
Try this:
<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>
This gave me what you wanted.
Useful links: http://www.i18nguy.com/markup/right-to-left.html and http://www.w3.org/TR/html401/struct/dirlang.html
change the inline-block to 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>
This will displays as you want in FF & Chrome, but not in IE.
加载中,请稍侯......
精彩评论