css - 有没有一种方法可以使用 CSS 创建基于字符大小的布局？

Question

我必须将一个过去以文本模式在系统控制台中运行的旧应用程序移植到 HTML5。

HTML5 中的布局必须模仿旧的行为，即字体必须是等宽的，表单、字段和文本的尺寸必须是字符宽度或高度的倍数。

到目前为止，通过使用 absolute 定位，以及为 font、font-size、 行高。

对于元素的高度，我在 em 中指定了我的值，所以一切都就位了。但是，我找不到轻松处理元素宽度的方法。

假设我有一个标签、一个文本输入框和一个正下方的 div，它们的宽度必须完全相同。标签长度为 7 个字符，因此输入也应为 7 个字符。

类似于:

mylabel
[input]
[mydiv]

但是，当使用 em 作为字符宽度时，我得到以下布局:

mylabel
[input way too large]
[mydiv way too large]

显然，因为 em 表示基本字符高度，而不是宽度。所以我不能依赖它。

你有解决这个问题的方法吗？如果可能的话，我想避免使用 Javascript，但我想我别无选择。

我必须针对所有流行的浏览器(Internet Explorer、Chrome、Firefox、Opera)。

Answer 1

_{我不知道这是否被任何浏览器支持，但总有一天这可能是一个可以接受的解决方案。}

CSS3 Values and Units Module定义 ch unit

Equal to the advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.

“超前量”本质上就是字符的宽度。在等宽字体中，所有字符宽度都相同。

另一种方法是计算每个使用的字体大小的字符宽度，并在定义宽度时使用该值的倍数。如果幸运的话，它将是 em 单位的一小部分。