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

问题描述：

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

I want to add a label in my progress bar tag like in this beautiful example:

假设蓝色是值而红色是最大值，我该如何在里面添加标签就像我的35？

Assuming the blue is the value and the red is the max, how can I add a label inside there like my "35"?

答

使用CSS的位置：相对将文本移动到栏上。

Use CSS's position:relative to manoeuvre the text onto the bar.

短栏的快速而肮脏的解决方案是：

A quick and dirty solution for a short bar is:

position: relative;
left: -100px;

其中左侧强制显示在其顶部的栏旁边的文字。

where left forces the text that would be next to the bar on top of it.

在评论中，Matthias指出，如果进度条宽度为100％， left 不起作用。

In the comments, Matthias made the point that left doesn't work if the progress bar is 100% width.

它不起作用，因为它强制栏下面的文字。任何宽度的栏都足以迫使下面的文字失败。

It doesn't work because it forces the text below the bar. It'll fail for any width of bar sufficient to force the text below.

相反，你必须更聪明一点，做一些事情：

Instead you have to get a bit more clever and do something like:

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

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

Here the top:-1.5em replaces the left adjustment in the jsFiddle. The margin-left is an attempt to centre the text. It should actually be a little less than 50%.

如果有人有一个更好的解决方案，可以将文本集中在条形图上，而不像手工波浪50％的边缘，可以随意评论它，我会再次调整。

If someone has a better solution to centre the text on the bar that's less hacky than the hand-wavy 50%ish margin feel free to comment on it and I'll adjust this again.

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

相关推荐