Как равномерно разместить текст в текстовых полях? - PullRequest
Новая
       22

Как равномерно разместить текст в текстовых полях?

0 голосов
/ 24 марта 2019

Итак, я заполняю пробел с текстом между ними (см. Мой предыдущий вопрос ), и теперь у меня возникла проблема, когда я равномерно расположил текст в промежутке между margin-left и margin -то правильно, однако, если я поставлю, скажем, 1 вместо 0, это выглядит как 1: а с 0 это нормально 0: но так как 1 меньше пикселей, это выглядит не очень хорошо, я всегда могу просто оставить это так и надеюсь, что никто не заметит но я бы хотел сделать его как можно более чистым.

Смотрите сами здесь

Если нет, то вот код, 

.text1 {
  display: inline-block;
  font-size: 4vmin;
  margin-right: -22px;
  margin-left: -4px;
  user-select: none;
  text-align: right;
}

.fill-out {
  outline: none;
  border: 0;
  margin-left: 18px;
  display: inline-block;
}

#box1 {
  width: 13px;
}

#box2 {
  width: 13px;
}

#box3 {
  width: 21px;
}
<div>

  <input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
  <span class="text1">:</span>
  <input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
  <span class="text1">.</span>
  <input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />

</div>
```

Введите только 2, затем запустите снова и введите 1

1 Ответ

0 голосов
/ 24 марта 2019

Попробуйте использовать моноширинные шрифты.

потому что я не думаю, что вы получите желаемый результат со шрифтом по умолчанию.

см. В википедии разницу вики .

...