为 html 输入文本指定 3 个字符的宽度答案

【问题标题】：Specify width of 3 chars for an html input text为 html 输入文本指定 3 个字符的宽度
【发布时间】：2019-03-23 06:07:30
【问题描述】：

我如何创建一个恰好可以容纳 3 个字符的 HTML 文本框？
我在网上找到了这个：<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
它创建一个宽度为 10px 的文本框。我可以使用它，但我想知道我们是否可以明确设置 3 个字符的宽度，而不是“玩”像素，

【问题讨论】：

关于这个here 的一些有趣的讨论 - size 属性应该可以工作，但它会被任何可能适用的 CSS 覆盖。而且跨浏览器可能不一致...
@XavierHolt:size 用于最大可接受输入。我对宽度感兴趣
@Craytus - 实际上，size 在这里影响宽度 - maxlength 是控制最大字符数的那个。查看this page 以获得更详尽的说明。

标签： html css

【解决方案1】：

使用ch 指标。

width: 3ch;

如果您要更改左侧和/或右侧填充，请确保您的 box-sizing 属性设置为 content-box。

【讨论】：

【解决方案2】：

不可靠，因为 l 和 W 的宽度非常不同。

但是，如果您将字体设置为 monospace，这会有所帮助。然后，您应该可以在输入元素上设置size="3"，理论上它应该正好是三个字符宽。

【讨论】：

这通常在实践中也有效。并且字体不需要设置为monospace（依赖于浏览器的通用等宽字体），而是设置为 some 等宽字体，例如font-family: Consolas, Lucida Console, monospace.