20

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

在此处输入图像描述

假设蓝色是值，红色是最大值，我怎样才能在里面添加一个标签，比如我的“35”？

4

2 回答 2

5

使用 CSSposition:relative将文本移动到栏上。

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

position: relative;
left: -100px;

where left 强制将在其顶部的栏旁边的文本。

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

它不起作用，因为它强制栏下方的文本。对于足以强制下面的文本的任何宽度的条，它都会失败。

相反，您必须变得更加聪明，并执行以下操作：

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

这里 top:-1.5em 替换了 jsFiddle 中的左侧调整。margin-left 是一种使文本居中的尝试。它实际上应该略低于 50%。

如果有人有更好的解决方案将文本居中放置在比手动波浪 50%ish 边距更少 hacky 的栏上，请随时评论它，我会再次调整它。

于 2012-09-17T02:50:34.853 回答
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>

如果您不希望每次都使用相同的文本格式，那么您可以使用 data 属性（即data-label）

.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>
于 2016-09-18T05:18:33.277 回答