javascript - 根据上面的文字设置进度条的高度

Question

我想让我的进度条在上面叠加文字。文本如果很长，应动态更改进度条的高度，以便显示全文。

如何根据文本的长度动态设置进度条的高度？

这是我的 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>

这就是文本现在的样子。

Answer 1

问题是您在文本上使用了 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>