如何在 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 替换了显示表，以便更好地控制。meter::-webkit-meter-bar {&nbsp; height: 25px;&nbsp; background: none;&nbsp; background-color: whitesmoke;&nbsp; box-shadow: 0 5px 5px -5px #333 inset;&nbsp; margin-bottom: 10px;}.scale {&nbsp; display: flex;&nbsp; width: 100%;&nbsp; padding: 0px;&nbsp; justify-content: space-between;&nbsp; list-style: none;}meter::-webkit-meter-optimum-value {&nbsp; background-image: -webkit-linear-gradient(/*90deg,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #8bcf69 20%,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #e6d450 20%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #e6d450 40%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #f28f68 40%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #f28f68 60%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #cf82bf 60%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #cf82bf 80%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #719fd1 80%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #719fd1 100%*/&nbsp; );&nbsp; transition: width 1s;}<div class="meter-wrapper">&nbsp; <meter min="1" max="5" value="{{prediction}}"></meter>&nbsp; <ul class="scale">&nbsp; &nbsp; <li class=""><span class="scale">1</span></li>&nbsp; &nbsp; <li><span class="scale">1.8</span></li>&nbsp; &nbsp; <li><span class="scale">2.6</span></li>&nbsp; &nbsp; <li><span class="scale">3.4</span></li>&nbsp; &nbsp; <li><span class="scale">4.2</span></li>&nbsp; &nbsp; <li class=""><span class="scale">5</span></li>&nbsp; </ul></div>