html - 在同一行的 2 个跨度上向右浮动，但需要第一个跨度位于左侧

Question

这是我的 HTML 代码

<span class="pull-right red">Text 1</span>
<span class="pull-right green">Text 2</span>

我的 CSS 是

.pull-right{
    float:right;
}
.red{
    color:red;
}
.green{
    color:green;
}

它将 text 1 对齐到该行的最右边。我希望第一个跨度(即 文本 1)在第二个跨度的左侧对齐。

Here is JSFiddle Link.

在案例 1 中，我提供了我的 HTML。

在案例 2 中，我重新排序了 HTML。那是我放在第一位的 span text2 和我放在第二位的 text1。然后我得到了预期的结果。我可以通过 JQuery 重新排序。但我不想重新排序 HTML。

那么有什么方法可以在不重新排序 HTML 的情况下获得预期的结果吗？任何 CSS 解决方案？

Answer 1

将两个 span 标签包含在具有 float:right 的 div 标签中。

HTML:

.....

<div class = "content">
  <span class="pull-left red">Text 1</span>
  <span class="pull-right green">Text 2</span>
</div>

...

CSS::

.content{
  float:right;
}
.pull-right{
  float:right;
}
.pull-left{
  float:left;
}

其余 CSS 保持不变