Html 输入大小属性与div宽度属性

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

我应该使用哪个属性使div的宽度与输入的size属性匹配

代码：

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

---

同时尝试输入和div中的width属性，并尝试以%

html:

---

使用此样式可以为输入和div设置完全相同的宽度

input#b, div#c {width:100px;}

---

size

属性设置“字符”中的可见宽度，浏览器对此的解释不同。在支持浏览器的情况下，

ch

单元意味着数字

0

的宽度，因此它的定义非常精确，尽管它当然取决于字体。所以这两种设置宽度的方法是不可通约的

要使

div

元素紧跟在

input

元素之后，与

input

元素一样宽，最简单的方法是将它们包装在一个具有固定布局的表中。（那些不能忍受HTML表格的人可以使用CSS表格代替。）在这种方法中，您根本不需要设置

div

元素的宽度；它从表格格式中获取宽度。我刚刚为它设置了一些内容和背景色，以便元素的宽度可见

你好，世界

我宁愿不更改输入组件，只更改div，可以吗？我已经删除了输入css，并在上面做了更改。请尝试一下，让我知道它是否对您有效。是否有帮助？如果输入的size属性是30，那么div的宽度应该是多少？30%？不，您需要在同一个参数中设置这两个属性，或者两者都在%中，或者两者都在px中，当然您可以在px中设置一个，在%中设置一个，但这将是不好的做法

 #myDiv{
     width:x%(set x per your requirement)
 }

input#b, div#c {width:100px;}