Question

我的进度条有问题。这是问题所在：

<b>Life of ' . stripslashes(htmlspecialchars($donnees['username'])) . ' :</b>   <progress id="progressBar" max="' . $donnees["life"] . '" value="'. $donnees["lifeac"] . '"></progress>

进度条很简单，这就是它应该显示的内容：

Life of **USER** : [Progress bar]

它完全符合我的要求但是用％写的值。例如，如果我的生命是855，它将在进度条的右端显示855％。这是我的CSS内部：

progress {
  display:inline-block;
  width:190px;
  height:20px;
  padding:15px 0 0 0;
  margin:0;
  background:none;
  border: 0;
  border-radius: 15px;
  text-align: left;
  position:relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}
progress::-webkit-progress-bar {
  height:11px;
  width:150px;
  margin:0 auto;
  background-color: #CCC;
  border-radius: 15px;
  box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
  display:inline-block;
  float:left;
  height:11px;
  margin:0px -10px 0 0;
  background: #F70;
  border-radius: 15px;
  box-shadow:0px 0px 6px #777 inset;
}
progress:after {
  margin:-26px 0 0 -7px;
  padding:0;
  display:inline-block;
  float:left;
  content: attr(value) '%';
}

欢迎提供帮助。谢谢！

HTML - 进度条在文本中显示“％”

0 个答案: