2024-08-25 06:00:00

输入大小与宽度

<input name="txtId" type="text" size="20" />

or

<input name="txtId" type="text" style="width: 150px;" />

哪个是最佳的跨浏览器代码?

当然,这取决于需求,但我很好奇人们是如何决定的,基于什么。


当前回答

我刚刚解决了一个表格,无论我试图缩小哪个元素,表格的宽度都保持不变。我使用firebug搜索,但找不到将宽度设置得这么高的元素。

最后,我尝试改变输入文本元素的大小属性,这就固定了它。由于某种原因,size属性覆盖了css宽度。我使用jQuery动态添加行到一个表,它是这些行,包含输入。因此,在使用appendTo()函数动态添加输入时,最好同时设置size属性和width。

其他回答

我建议,可能最好的方法是设置样式的宽度在em单位:)所以输入大小为20个字符只需设置style='width:20em':)

可以使用样式和宽度来调整文本框的大小。 下面是它的代码。

<!DOCTYPE html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > > < /头 身体< > < div对齐= "中心" > <形式方法=“post”> <div class="w3-row w3-section"> <div class="w3-rest" align =" center"> <input name="lastName" type="text" id="myInput" style="width: 50%"> < / div > < / div > > < /形式 < / div > 身体< / > < / html >

使用align将文本框居中。

我想说这违背了“传统智慧”,但我通常更喜欢使用大小。这样做的原因正是许多人说不应该这样做的原因:字段的宽度因浏览器而异,取决于字体大小。具体来说,无论浏览器设置如何,它总是足够大以显示指定的字符数。

例如,如果我有一个日期字段,我通常希望字段宽度足以显示8或10个字符(两位数的月和日,两位数或四位数的年,带分隔符)。设置size属性本质上保证了整个日期都是可见的,浪费的空间最小。对于大多数数字也是如此——我知道预期值的范围,所以我将size属性设置为适当的位数,如果适用,还可以加上小数点。

据我所知,没有CSS属性这样做。例如,在em中设置宽度是基于高度,而不是宽度,因此如果您想显示已知数量的字符,则不是非常精确。

当然,这种逻辑并不总是适用——例如,名称输入字段可以包含任意数量的字符。在这些情况下,我将回到CSS宽度属性,通常在px。但是,我想说的是,我所创建的大多数字段都具有某种已知内容,并且通过指定size属性,我可以确保在大多数情况下,大部分内容都在没有剪切的情况下显示出来。

举个有意义的例子

我会说使用size属性和max-width样式;当有足够的空间时,这为您提供了接近最佳宽度,但在需要时限制了输入长度。

<input type="text" size="48" style="max-width:100%;">

请看这个代码本。

HTML控制元素的语义。CSS控制页面的布局/样式。当你控制你的布局时使用CSS。

简而言之,永远不要使用size=""