我正在嘗試創建帶有刻度的儀表欄，如下所示。但我不知道如何讓它從 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>
1 回答
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
請嘗試這個。我已經用 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>
- 1 回答
- 0 關注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消