html - 输入大小属性与 div 宽度属性

Question

在我的 html 页面中，我在 div 组件上方放置了一个输入组件。
我希望输入和 div 具有相同的宽度，输入的“大小”属性为 30。
如果我将 div 的“样式”属性与“宽度:30ch”或“宽度:30em”一起使用，它似乎不起作用，在这两种情况下，div 组件都比输入组件宽得多。

我应该使用哪个属性来使 div 的宽度与输入的大小属性相匹配？

代码:

<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>

Answer 1

size 属性以“字符”为单位设置可见宽度，浏览器对此有不同的解释。 ch 单位，在支持的浏览器中，表示数字 0 的宽度，因此它的定义非常精确，当然它取决于字体。所以这两种设置宽度的方式是不可通约的。

要在 input 元素之后制作一个与 input 元素一样宽的 div 元素，最简单的方法是将它们包裹在一个具有固定布局的表。 (那些不能忍受 HTML 表格的人可以改用 CSS 表格。)在这种方法中，您根本没有设置 div 元素的宽度；它从表格格式中获取宽度。我刚刚为其设置了一些内容和背景颜色，以便元素的宽度可见。

<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>