html - 在特定 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%。你必须将父元素的位置设置为 relative 才能工作，将 z-index 设置为大于 0 以使其 float 在其他所有元素之上。将宽度设置为父元素的 100%，并将文本居中对齐。