如何在 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 {

  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>