如何在进度条标签内添加标签？

Question

我想在我的进度条标签中添加一个标签,就像这个漂亮的例子一样:

假设蓝色是值,红色是最大值,我如何在其中添加标签,如"35"？

Answer 1

使用CSS position:relative将文本移动到栏上.

短条的快速而肮脏的解决方案是:

position: relative;
left: -100px;

left左侧强制文本位于其顶部的栏旁边.

在评论中,Matthias指出,left如果进度条宽度为100%,则无效.

它不起作用,因为它强制栏下方的文本.任何宽度的条都足以迫使下面的文字失败.

相反,你必须更聪明一点,做一些事情:

    position: relative;
    top: -1.5em;
    margin-left: 50%;

这里顶部:-1.5em取代了jsFiddle中的左侧调整.左边距是试图使文本居中.它应该实际上小于50%.

如果有人有一个更好的解决方案,可以将文本放在条形图上,而不是手工波浪的50%ish边缘,可以随意评论,我会再次调整.