html - 如何在 css 和 html 中为百分比栏添加标签？

Question

我用 css 做了一个百分比条，但我想在标签中或旁边写上百分比数字，当我写它时更改

CSS 代码:

#progressbar {
    background-color: #999;
    border-radius: 10px; /* (height of inner div) / 2 + padding */
    padding: 0.5px;
    max-width:150px;
    font-size: 9px;
}
#progressbar > div {
    background-color:red;
    /* Adjust with JavaScript */
    height: 10px;
    border-radius: 10px;
    max-width:150px;
    font-size: 12px;    
}

在体内

echo" Excellent       <div id="."progressbar".">
  <div style="."width:".(($ex*150)/100)."px;".">".$ex."%</div>
</div>";

我怎么想在旁边写一个字？

Answer 1

如果我可以改进它，请告诉我 :)

#progressbar {
  background-color: #999;
  border-radius: 10px;
  /* (height of inner div) / 2 + padding */
  padding: 0.5px;
  max-width: 150px;
  font-size: 9px;
  position: relative;
}
#progressbar > div {
  background-color: red;
  /* Adjust with JavaScript */
  height: 10px;
  border-radius: 10px;
  max-width: 150px;
  font-size: 12px;
}
#progressbar span {
  position: absolute;
  width: 100%;
  text-align: center;
}

<div id="progressbar">
  <span>Excellent</span>
  <div style="width:100px;"></div>
</div>

更新:(请求进度条旁边的文本)

#progressbar {
  background-color: #999;
  border-radius: 10px;
  /* (height of inner div) / 2 + padding */
  padding: 0.5px;
  max-width: 150px;
  font-size: 9px;
  width: 100px;
  display: inline-block;
}
#progressbar > div {
  background-color: red;
  /* Adjust with JavaScript */
  height: 10px;
  border-radius: 10px;
  font-size: 12px;
}
#progressBarContainer span {
  display: inline-block;
}

<div id="progressBarContainer">
  <div id="progressbar">
    <div style="width:50%;"></div>
  </div>
  <span>Excellent</span>
</div>