我想让我的进度条在上面叠加文字。文本如果很长,应动态更改进度条的高度,以便显示全文。
如何根据文本的长度动态设置进度条的高度?
这是我的 html 代码..
<ul>
<li class="progress" style="position: relative;">
<div class="progress-bar" style="width: 60%; float: left;"></div>
<div style="position: absolute;">
<a href="#"> My TEXT </a>
</div>
</li>
</ul>
这就是文本现在的样子。
最佳答案
问题是您在文本上使用了 position: absolute
,这会将它从流中移除,并让父级忽略它。
要解决此问题,您可以将 position: absolute
应用于进度条,然后使用 z-index 将其定位在文本后面。
代码看起来像这样:
<ul>
<li class="progress" style="position: relative;">
<div class="progress-bar" style="position: absolute; top: 0; left: 0; bottom: 0; width: 60%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<a href="#"> My TEXT </a>
</div>
</li>
</ul>
关于javascript - 根据上面的文字设置进度条的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31940587/