根据文本上的文本设置进度条的高度

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>