Question

在我的html页面中，我有一个放在div组件上方的输入组件我希望输入和div具有相同的宽度，输入的“大小”属于30 如果我使用div的“style”属性“width：30ch”或“width：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的宽度，因此它的定义非常准确，但它当然取决于字体。所以这两种设置宽度的方法是不可通约的。

要在div元素之后的input元素与input元素完全相同，最简单的方法是将它们包装在具有固定布局的表中。（那些不能使用HTML表的人可以使用CSS表。）在这种方法中，你根本不设置div元素的宽度;它从表格格式中获取宽度。我刚为它设置了一些内容和背景颜色，以便可以看到元素的宽度。

＆＃13;

<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>

＆＃13;

Answer 2

在输入和div中同时尝试宽度属性，另外尝试在％

中给出宽度

HTML：

  <html>
  <input id="myinput"></input>
  <div id="myDiv"></div>
  </html>

css：

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

Answer 3

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

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

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

3 个答案: