1

我有一个输入，其样式使它看起来像有 5 个输入。它只接受字母 ([az])

在此处输入图像描述

我想做的是给该输入中的 5 个字母相同的宽度，以便每个字母都居中以防止这样的事情

在此处输入图像描述

这是这个输入的 CSS

input {
  min-height: 0;
  min-width: 0;
  font-size: 2em;
  line-height: 1.4;
  letter-spacing: 1.18em;
  text-align: left;
  padding: 0 0 0 0.55em;
  display: block;
  position: relative;
  width: 6em;
}

input::after {
  content: attr(data-content);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: .55em;
}
4

2 回答 2

4

正如@HeikoRupp 在评论中所建议的那样，使用固定宽度的字体。但是不要使用 Courier，因为它是最糟糕的选择，而且在旧系统中它甚至可能是位图字体（因此仅在几种字体大小下看起来可以容忍）。在实践中，在现代 Windows 系统中，Courier 这个名称指的是 Courier New（除非系统确实安装了 Courier），这有点好，但值得怀疑。

部分基于字体调查，我建议如下：

input { font-family: Consolas, Monaco, Lucida Console, monospace }

通用名称monospace意味着将使用系统的默认等宽字体。在 Android 上，这意味着 Droid Mono，这是默认情况下唯一可用的等宽字体。

于 2013-04-12T12:55:08.753 回答
0

也许试试这个插件：https ://github.com/davatron5000/Lettering.js

lettering();

示例：http: //jsfiddle.net/krMhR/

于 2013-04-12T11:14:48.737 回答