Как прибавить к текущей ширине value +10px?

Question

[nikmil]

У меня должно располагаться значения по центру.
Но от изменения кол-во цифр он прыгает.
Нашла для себя решение к текущей ширине value добавить +10px чтобы он не прыгал.
Но мне это не удается сделать.
что то вроде -> width: calc(fit-content + 10px);

Занятно в том что если убрать шрифт (поставить дефолтный) оно не прыгает.

Comments

[imko]

к текущей это к какой?

[nikmil]

imko, к текущей ширине class=value

[imko]

nikmil, так она же меняется постоянно, будет так же прыгать но на 10 пикселей шире)

[nikmil]

imko, складывалось впечатление что блок будет больше на 10px от фактической ширины value, может обернуть его как то? Или есть другие решения этой проблемы. Я увидела это реализацию Hamster Combat там значения не прыгают. Хотелось узнать как это реализовано...

[imko]

nikmil, ну, значение меняется => ширина циферок другая => ширина + 10 другая
можешь задать ширину в ch или использовать моноширинный шрифт

[szQocks]

nikmil,

<div class='box'>
  <div class='container'>
    <div class='wrap-point'>
      <div class='point'></div>
    </div>
    <div class='value'>125 000</div>
  </div>
</div>

.box {
  padding: 20px 0px;
  width: 300px;
  display:flex;
  justify-content: center;
  border: 1px solid black;
}

.container {
  display:flex;
  align-items: center;
  gap:10px;
  min-width: 100%;
}
.wrap-point{
  width: 50%;
}
.point {
  margin-left: auto;
  width:30px;
  height: 30px;
  background: red;
}

.value {
  width: 50%;
  font-family: fantasy;
  font-size: 20px;
}

Answer 1

[Сергей delphinpro]

ну можно так, например



Или так