跨度元素未按预期顺序排列

Question

我在div中有3个<span>元素，它们应该根据它们的顺序显然排列。最后两项应该在右边。所以我做了一个float: right，但他们在订单中混淆了。 ＆＃34;前进＆＃34;应该在右边。

HTML

<div class="caseTitle">
  <span class="caseNumber">Case</span>
  <span class="caseBack">Back</span>
  <span class="caseForward">Forward</span>
</div>

CSS

.caseTitle {
  background: #333;
  color: #fff;
  padding: 6px;
}
.caseNumber{}
.caseBack{
  float: right;
}
.caseForward{
  float: right;
}

这是我的小提琴。 http://jsfiddle.net/JGallardo/8wXNM/

Answer 1

你可以将正确的浮动项目包装在div中，然后右移浮动div，而不是像每个单词那样：

HTML

<div class="caseTitle">
    <span class="caseNumber">Case</span>
    <div class="wrap">
        <span class="caseBack">Back</span>
        <span class="caseForward">Forward</span>
    </div>
</div>

CSS

.caseTitle {
  background: #333;
  color: #fff;
  padding: 6px;
}

.wrap{
  float: right;
}

小提琴：http://jsfiddle.net/8wXNM/1/

Answer 2

解决这个问题的一种快速而肮脏的方法是将Forward div移到Back div之上。基本上，CSS是浮动它一直看到的第一个div，然后是下一个div。因此，如果你在前面移动Forward div，它将在Ba​​ck div之前浮动，然后尽可能地浮动。

<div class="caseTitle">
    <span class="caseNumber">Case</span>
    <span class="caseForward">Forward</span>
    <span class="caseBack">Back</span>
</div>

而不是：

<div class="caseTitle">
    <span class="caseNumber">Case</span>
    <span class="caseBack">Back</span>
    <span class="caseForward">Forward</span>
</div>

Fiddle