Html 在进度条内对齐文本

我正在尝试在一些进度条中将一些文本向左和向右对齐，在右侧以书面形式完成的百分比，在左侧主题的标题。我相信这是一个简单的解决方案，但我无法将文本移到右侧，同时将一些文本保留在左侧，所有文本都在同一行上

我尝试过像这样对齐单独的跨距：

<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; }

第一件事60/100


第二件事40/100

在第二个跨距上使用

浮动：右

，并删除对齐

---

编辑：要使其完全对齐，可以使用css定位。选中此JSFIDLE:。

如果您想将其完全对齐，可以使用绝对定位。为

li

元素指定

相对位置，为
元素指定
绝对位置，为
.percent
指定一个
位置，不要忘记将其放置在右侧，因此也要插入
右侧：0
。如果右边距栏的末端太近，请添加右边距

代码段：


ul{
列表样式类型：无；
}
李{
宽度：100%；
边框底部：1px实心#ebebebeb；
位置：相对位置；
}
李：完成{
背景色：#dbdb；
填充：20px；
}
.完成.主题{
文本对齐：左对齐；
}
.完成率{
位置：绝对位置；
右：0；
右边距：20px；
}


第一件事60/100


第二件事40/100

不需要浮动
。subject
，只将浮动设置为
。percent
，它看起来也更好。谢谢各位。不幸的是，我解释得很糟糕，实际上希望
.percent
span一直对齐到列表项的右侧，而不仅仅是completion div。因此，span总是以不同的行结束，而不是以相同的行结束。有什么想法吗？是的，我本来是这样做的，但我觉得在这种情况下诉诸绝对定位是不好的做法。我错了吗？我不认为在这种情况下使用绝对定位是个坏主意。