输入大小属性与div宽度属性 [英] Input size attribute vs div width attribute

问题描述

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

In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.

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

Which attribute should I use to make the div's width match the input's size attribute?

代码:

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

推荐答案

size 属性在字符"中设置可见宽度，浏览器对此解释不同.在支持的浏览器中， ch 单位表示数字数字 0 的宽度，因此，它的定义非常精确，尽管它当然取决于字体.因此，这两种设置宽度的方法是无法比拟的.

The size attribute sets the visible width in "characters", and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.

要在 input 元素之后制作与 input 元素一样宽的 div 元素，最简单的方法是将它们包装在固定布局的桌子.(那些不能忍受HTML表的人可以改用CSS表.)这种方法完全不需要设置 div 元素的宽度.它从表格格式中获取宽度.我刚刚为其设置了一些内容和背景色，以使元素的宽度可见.

To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.

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

这篇关于输入大小属性与div宽度属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！