html5 – 如何在进度条标签中添加标签?

前端之家收集整理的这篇文章主要介绍了html5 – 如何在进度条标签中添加标签?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的进度条标签添加一个标签,就像在这个美丽的例子中一样:

假设蓝色是值,红色是最大值,那么我可以像我的“35”那样在里面添加一个标签

解决方法

使用CSS的位置:相对于在文本上操纵文本.

一个简单而简单的解决方案是:

position: relative;
left: -100px;

左边的文字会强制在旁边的文字旁边.

评论中,Matthias提出的一点是,如果进度条是100%宽度,则left不起作用.

它不起作用,因为它强制文本在栏下面.对于任何宽度不大的强制下面的文本,它将失败.

相反,你必须更加聪明,做一些像:

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

这里顶部:-1.5em替换jsFiddle中的左边调整.边距左边是试图使文本居中.实际上应该稍低于50%.

如果有人有一个更好的解决方案,使文本的中心在那个不那么笨重的酒吧,手感波浪50%的边缘可以自由地评论它,我会再次调整.

猜你在找的HTML5相关文章