在特定DIV上添加文本

Question

所以，我有一些进度条，如：

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

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

这个CSS：

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

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

这里有demo

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

我使用HTML和CSS不太好....谢谢！ ：）

Answer 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>

修改CSS

#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;
}

见

http://jsbin.com/EGAzAZEK/13/ http://jsbin.com/EGAzAZEK/13/edit?html,output

我们的想法是在栏中添加一个额外的div，然后将它放在父元素的左上角，并将宽度设置为父元素的100％。你必须将父元素的位置设置为相对的，以使其工作，将z-index设置为大于0，使其浮动在其他所有元素之上。将宽度设置为父元素的100％，并将文本对齐到中心。

Answer 2

试试这个（它有标签和percantage计数文本）：

添加此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>

JSBin