html - 如何使用 CSS 删除输入字段最后一个字母的字母间距？

Question

我正在尝试对输入字段进行分区，使其在屏幕上显示为单独的输入字段，看起来像 otp 字段。我从其他 SO 答案中在一定程度上实现了它。但我仍然无法获得确切的 UI 结果。

我的代码 HTML

<div id="divOuter">
  <div id="divInner">
    <input id="partitioned" type="text" maxlength="4"/>
  </div>
</div>

CSS

#partitioned {
  padding-left: 15px;
  margin-right: -42px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 190px;
  min-width: 190px;
}

#divInner {
  left: 0;
  position: sticky;
}

#divOuter {
  width: 190px;
  overflow: hidden;
}

fiddle link

我找不到解决方案。需要一些帮助。

Answer 1

#partitioned 的宽度太小，导致输入字段水平滚动以容纳最后一位数字。将宽度更改为 width: 220px; 这将修复它:

https://jsfiddle.net/yx1guj3s/