我正在尝试创建带有刻度的仪表栏,如下所示。但我不知道如何让它从 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>
侃侃无极
相关分类