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

标签 html css

在我的 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/

相关文章:

html - 流动的固定内容

css - Bootstrap 3 - 跨网格将文本对齐到表单控件项

javascript - 仅通过滚动更改涉及每个菜单项的背景图像

html - 如何更改 Bootstrap 滚动 spy 事件链接颜色

html - 带有换行文本的内联元素,虽然没有 float 但垂直对齐

javascript - Bootstrap javascript的加载顺序

javascript - 如何避免/最小化列表中列表的缩进?

javascript - jQuery Mobile 文件使用

javascript - 以 3 个子 div 为中心,宽度均为 100%?

html - flash 和显示的 div 的问题