Как создать масштаб в HTML5 метре? - PullRequest
Новая
       25

Как создать масштаб в HTML5 метре?

0 голосов
/ 19 апреля 2020

Я пытаюсь создать шкалу счетчика со шкалами, как показано ниже. Но я не мог понять, как заставить его начинаться с 1 и заканчиваться на 5. Здесь, на рисунке ниже, кажется, что он начинается с некоторого значения и заканчивается с некоторым значением> 5.

Как можно Я исправляю это и все равно имею все средние значения на одинаковом расстоянии?

enter image description here

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 Ответ

1 голос
/ 19 апреля 2020

Пожалуйста, попробуйте это. Я заменил таблицу отображения на 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>
...