如何在 HTML5 仪表中创建刻度？

Question

我正在尝试使用如下所示的刻度创建仪表条。但是我不知道如何让它从 1 开始到 5 结束。在这里，在下图中，它似乎从某个值开始到某个值 > 5 结束。

我怎样才能解决这个问题并让所有中间值保持相等的距离？

meter::-webkit-meter-bar {
  height: 25px;
  background: none;
  background-color: whitesmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  margin-bottom: 10px;
}

.scale {
  display: table;
  width: 100%;
  padding: 0px 0px 0px 0px;
  border: 0px 0px 0px 0px;
  text-align: center;
}

.scale li {
  width: 10%;
  display: table-cell;
  white-space: nowrap;
}

 meter::-webkit-meter-optimum-value {
  background-image: -webkit-linear-gradient(/*90deg, 
            #8bcf69 20%, 
            #e6d450 20%,
            #e6d450 40%,
            #f28f68 40%,
            #f28f68 60%,
            #cf82bf 60%,
            #cf82bf 80%,
            #719fd1 80%,
            #719fd1 100%*/
  );
  transition: width 1s;
}

<div class="meter-wrapper">

  <meter min="1" max="5" value="{{prediction}}"></meter>
  <ul class="scale">
    <li class=""><span class="scale">1</span></li>
    <li><span class="scale">1.8</span></li>
    <li><span class="scale">2.6</span></li>
    <li><span class="scale">3.4</span></li>
    <li><span class="scale">4.2</span></li>
    <li class=""><span class="scale">5</span></li>
  </ul>

</div>

Answer 1

请试试这个。我已经用 flex 替换了 display table，以便更好地控制。

meter::-webkit-meter-bar {
  height: 25px;
  background: none;
  background-color: whitesmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  margin-bottom: 10px;
}

.scale {
  display: flex;
  width: 100%;
  padding: 0px;
  justify-content: space-between;
  list-style: none;
}

meter::-webkit-meter-optimum-value {
  background-image: -webkit-linear-gradient(/*90deg, 
            #8bcf69 20%, 
            #e6d450 20%,
            #e6d450 40%,
            #f28f68 40%,
            #f28f68 60%,
            #cf82bf 60%,
            #cf82bf 80%,
            #719fd1 80%,
            #719fd1 100%*/
  );
  transition: width 1s;
}

<div class="meter-wrapper">

  <meter min="1" max="5" value="{{prediction}}"></meter>
  <ul class="scale">
    <li class=""><span class="scale">1</span></li>
    <li><span class="scale">1.8</span></li>
    <li><span class="scale">2.6</span></li>
    <li><span class="scale">3.4</span></li>
    <li><span class="scale">4.2</span></li>
    <li class=""><span class="scale">5</span></li>
  </ul>

</div>

如何在 HTML5 仪表中创建刻度？

How to create scale in the HTML5 meter?

html

css

progress-bar