你如何實現這種向後分區效應？

Question

你如何讓文字倒退而不是轉發？

看看這兩個以下圖片...

---

通常情況下，我會創建一個具有no width和white-space: nowrap創建移動向前文本一個div 。注意，兩張圖片的箭頭位置相同，但第二張圖片的文字向後移動的更多。 如何使用CSS實現同樣的效果？

Answer 1

可以使用右浮在一系列子元素的做到這一點：

span { 
 
    float: right; 
 
}

<div> 
 
    <span>Text 1</span> 
 
    <span>Text 2</span> 
 
    <span>Text 3</span> 
 
    <span>Text 4</span> 
 
    <span>Text 5</span> 
 
</div>

或者使用direction:rtl：

div { 
 
    direction: rtl; 
 
} 
 
span { 
 
    direction: ltr; 
 
    display: inline-block; 
 
}

<div> 
 
    <span>Text 1</span> 
 
    <span>Text 2</span> 
 
    <span>Text 3</span> 
 
    <span>Text 4</span> 
 
    <span>Text 5</span> 
 
</div>

Answer 2

使用float: right;或text-align: right;

有很多解決方案，做到這一點的。

http://www.w3schools.com/cssref/pr_class_float.asp
http://www.w3schools.com/cssref/pr_text_text-align.asp