CSS重新排序两个内联项

Question

嘿伙计我有以下代码

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

我如何交换Foo和blah的位置。我试图把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>