如何均匀space文本与文本框？

Question

所以我用中间的文本填充空白（参见我的），现在我遇到了一个问题，我用 margin-left 和 margin- 均匀地间隔了中间的文本是的，但是如果我说 1 而不是 0，它看起来像 1 : 而 0 是正常的 0: 但由于 1 的像素较少，所以看起来不太好，我总是可以这样保留它并希望没有人注意到但是我想让它看起来尽可能干净。

自己看here

如果不是这里的代码，

.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

Answer 1

尝试使用等宽字体。

因为我认为使用默认字体您不会得到想要的结果。

在维基百科上查看差异 wiki。

如何均匀space文本与文本框？

How to evenly space text with text boxes?

css

margin

spacing