前端之家收集整理的这篇文章主要介绍了
html5 – 如何在进度条标签中添加标签?,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的进度条
标签中
添加一个
标签,就像在这个美丽的例子中一样:
假设蓝色是值,红色是最大值,那么我可以像我的“35”那样在里面添加一个标签?
使用CSS的位置:相对于在文本上操纵文本.
一个简单而简单的解决方案是:
position: relative;
left: -100px;
左边的文字会强制在旁边的文字旁边.
在评论中,Matthias提出的一点是,如果进度条是100%宽度,则left不起作用.
它不起作用,因为它强制文本在栏下面.对于任何宽度不大的强制下面的文本,它将失败.
相反,你必须更加聪明,做一些像:
position: relative;
top: -1.5em;
margin-left: 50%;
这里顶部:-1.5em替换jsFiddle中的左边调整.边距左边是试图使文本居中.实际上应该稍低于50%.
如果有人有一个更好的解决方案,使文本的中心在那个不那么笨重的酒吧,手感波浪50%的边缘可以自由地评论它,我会再次调整.
原文链接:https://www.f2er.com/html5/168635.html