如何用文本框均匀地隔开文本?

时间:2019-03-24 10:22:15

标签: css margin spacing

所以我要用介于两者之间的文本填充空白(请参阅我的previous question),现在我遇到了一个问题,即我将文本中间用margin-left和margin-right均匀地隔开了如果我说1而不是0,它看起来像是1:0代表正常的0:但是由于1的像素少,所以它看起来不太好,我总是可以这样保留它,希望没人注意,但我d可能希望使其看起来尽可能干净。

亲眼看看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。

1 个答案:

答案 0 :(得分:0)

尝试使用等宽字体。

因为我认为默认字体不会带来想要的结果。

在维基百科上查看区别wiki