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

时间:2012-09-17 02:47:18

标签: html5

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

enter image description here

假设蓝色是值而红色是最大值,我如何在其中添加标签,如“35”?

2 个答案:

答案 0 :(得分:5)

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

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

position: relative;
left: -100px;

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

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

它不起作用,因为它会强制栏下面的文字。如果任何宽度的条足以强制下面的文本,它都会失败。

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

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

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

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

答案 1 :(得分:3)

我自己试图这样做,最后遇到了一种解决方法。

使用伪元素:在以不同的方式完成之前

您使用 content:attr(value),如下所示:https://jsfiddle.net/96z0gwv7/1/ - 链接上的更多CSS样式

progress
{
  text-align:center;
}

progress:before {
  content: 'Value is ' attr(value);
}

<progress value="6" max="10"></progress>
<progress value="9" max="10"></progress>

如果您每次都不想使用相同的文本格式,那么您可以使用数据属性(即数据标签

.unique:before {
   content: attr(data-label);
}

<progress class="unique" value="9" max="10" data-label="90% completed"></progress>
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>