在我的 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>
最佳答案
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>
关于html - 输入大小属性与 div 宽度属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27354305/