CSS重新排序兩個同軸項目

Question

嗨，我有以下代碼

<span>Foo</span><span>blah</span> 

我如何可以互換Foo和嗒嗒的位置。我嘗試着將Foo與一個浮標對齊，但它將它發送到我的行的最右側，而我只是希望它在右側。

感謝

Answer 1

<span>Foo</span><span style="float:left">blah</span> 

Answer 2

span:last-child { 
 
    float: left; 
 
}

<span>Foo</span><span>blah</span>

當然，在這條狹窄的使用情況下，這隻能當這些元素在該行的開頭的唯一要素。

Answer 3

浮動將導致<span>元素成爲塊級元素。如果這不是你的意圖，你可以使用inline-flex屬性（see browser support）：

p { 
 
    display: inline-flex; 
 
} 
 
p span:first-child { 
 
    order: 2; 
 
}

<p><span>Foo</span><span>blah</span></p>