Question

鉴于letter-spacing: 16px;的CSS规则，我注意到字符在其“框”内左对齐，并使光标向前跳到最右边，好像我添加了一个额外的空间在角色之后。

是否可以使用letter-spacing，但是字符在新的扩展边界内水平对齐？

Answer 1

这是不可能的。原因是，这将充当padding / margin但不像position。但是，如果你想要这样的东西，你可以使用inline-flex并使用order重新排序。

＆＃13;

p {display: inline-flex;}
p span {padding: 3px;}
p span.second {order: 1;}

＆＃13;

<p>
  <span class="first">first</span>
  <span class="second">second</span>
  <span class="third">third</span>
</p>

＆＃13;

这只是一个POC。请随意从这里拿走。

Answer 2

如上所述，letter-spacing没有意义将角色定位在单位中，更确切地说，只是添加“追踪”。

从您的评论中可以明显看出您想要获得的内容，并且只要您可以将输入分成多个单字符输入，它就是可以实现的：

div {
  border: 1px solid black;
  overflow: hidden;
  float: left;
  clear: both;
}

input {
  border: none;
  display: block;
  float: left;
  width: 20px; /* mimics letter-spacing*/
  text-align: center;
}

<div>
  <input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m">
  <input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i">
  <input name="pin1[]" maxlength=1 value="m">
</div>

<div>
  <input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i">
  <input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m">
  <input name="pin2[]" maxlength=1 value="i">
</div>

是否可以在CSS中水平对齐单个字符和字母间距？

2 个答案: