在进度条中对齐文本

Question

我正在尝试在一些进度条中左右对齐一些文本，在右侧写入完成的百分比，在左侧写入主题的标题。我确信这是一个简单的解决方法，但我不能将文本向右移动，同时保留一些在左侧，所有都在同一行。

我尝试过对齐单独的跨度：

<div class="progress" style="width:40%">
    <span class="subject">Subject One</span><span class="percent">40/100</span>
</div>

/* styles */
.subject { text-align: left; }
.percent { text-align: right; }

但似乎内联元素并不关心它们的文本对齐方式。然而，当我让其中一个阻止时，它会分开。

这是小提琴：http://jsfiddle.net/U45XR/2/

非常感谢任何帮助！谢谢。

为了澄清，我希望文本一直对齐到列表项目本身的右侧，而不仅仅是在完成div中

Answer 1

如果要将它一直对齐，可以使用绝对定位。为relative元素指定li定位，为absolute指定.percent位置，不要忘记将其放在右侧，因此请同时插入right: 0 。如果距离栏的末端太近，请添加右边距。

实例：http://jsfiddle.net/U45XR/7/

Answer 2

在第二个范围内使用float:right并删除对齐。

http://jsfiddle.net/U45XR/4/

编辑：要将它一直对齐，您可以使用css定位。检查这个JSfiddle：http://jsfiddle.net/U45XR/5/。