Html 在特定DIV上添加文本

我有一些进度条，比如：

<div id="lifeBar-holder">
    <div id="lifeBar"></div>
</div>

<div id="discretionBar-holder">
    <div id="discretionBar"></div>
</div>

给你钱

我需要一种在每个进度条上添加文本和标签的方法，例如：

我不太擅长使用HTML和CSS。。。。谢谢！：）

试试这个（它既有标签又有percantage count文本）：

添加以下CSS代码：

CSS

.label { 
    position:absolute; 
    top:40px; 
    left:0; 
    height:15px; 
    line-height:15px; 
 }

 #label_one { top:20px; }
 #label_two { top:40px; }

.percentage_txt { 
    position:absolute; 
    left:0; 
    top:0; 
    text-align:center; 
    width:100% 
 }

并更改为此HTML代码：

HTML

<div class="label" id="label_one">SOME LABEL</div>  
   <div id="lifeBar-holder">
   <div id="lifeBar" style="width:40%"></div>
   <div class="percentage_txt">59%</div>
</div>


<div class="label" id="label_two">SOME LABEL</div>
<div id="discretionBar-holder">
    <div id="discretionBar" style="width:70%"></div>
    <div class="percentage_txt">1%</div>
</div>

一些标签
59%
一些标签
1%

修改后的HTML

 <div id="lifeBar-holder">
   <div id="lifeBar" style="width:40%"></div>
   <div class="loadNumber">40%</div>
</div>

<div id="discretionBar-holder">
  <div id="discretionBar" style="width:70%"></div>
  <div class="loadNumber">70%</div>
</div>

看

---

这样做的目的是在条中添加一个额外的div，然后将其放置在父元素的左上角，并将宽度设置为父元素的100%。必须将父元素的位置设置为“相对”，才能使其工作，将z索引设置为大于0，使其浮动在所有其他元素之上。将宽度设置为父元素的100%，并将文本对齐到中心。

谢谢，如果我想在屏幕截图上添加这样的标签？标签显示在这里40%@badmin我尝试了你评论中的代码，标签显示在顶部，而不是条的左侧。在发布之前，应该始终测试代码！这应该可以：label:40%@SuperScript它没有OP要求的标签。请看这个。

 <div id="lifeBar-holder">
   <div id="lifeBar" style="width:40%"></div>
   <div class="loadNumber">40%</div>
</div>

<div id="discretionBar-holder">
  <div id="discretionBar" style="width:70%"></div>
  <div class="loadNumber">70%</div>
</div>

#lifeBar-holder{width:200px;height:15px;background:grey; position:absolute; top:20px; left:30px;position:relative;}
#lifeBar{width:0;height:100%;background:green;}
#discretionBar-holder{width:200px;height:15px;background:grey; position:absolute; top:40px; left:30px; position:relative;}
#discretionBar{width:0;height:100%;background:blue;}

.loadNumber {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    text-align:center;
}