2010-03-30 2 views
6

Ich habe diesen HTML:css Richtung rtl Element, um Problem

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

Mit Richtung: ltr es zeigt:

x: 1, y: 2 | link1 | link2 

Aber wenn ich es zu rtl ändern ist zeigt:

link2 | x: 1, y: 2 | link1 

während ich würde erwarten:

link2 | link1 | 2 :y ,1 :x 

Gibt es eine Möglichkeit, css-Eigenschaften zu setzen, um das erwartete Ergebnis zu erreichen, ohne die Struktur der DOM-Elemente zu ändern (die Arten der Elemente können jedoch geändert werden)?

Antwort

7

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> 

Das gab mir, was Sie wollten.

Nützliche Links: http://www.i18nguy.com/markup/right-to-left.html und http://www.w3.org/TR/html401/struct/dirlang.html

+0

Danke, es hat funktioniert –

+0

Danke. Ich hatte mein div style = inline. Sobald ich es in Inline-Block geändert habe, hat es funktioniert. Nochmals vielen Dank. – moeabdol

1

Änderung der 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> 

Dies wird angezeigt, wie Sie in FF & Chrome wollen, aber nicht im Internet Explorer.

+0

Für mich funktioniert es, aber ich habe Angst, andere Dinge zu brechen .... Führe ich einen Test zur Überprüfung durch? –