2024-08-25 06:00:00

输入大小与宽度

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

or

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

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

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


当前回答

举个有意义的例子

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

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

请看这个代码本。

其他回答

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

HTML中的size属性和CSS中的width属性都将设置<input>的宽度。如果你想将宽度设置为接近每个字符的宽度,请使用**ch**单位,如下所示:

input {
    width: 10ch;
}

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

<!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将文本框居中。

大小在不同浏览器及其可能的字体设置之间是不一致的。

px中设置的宽度样式至少是一致的,模数框大小问题。如果您想要相对于字体大小设置样式,则可能还需要在' em '中设置样式(不过,除非显式设置输入字体族和大小,否则这将不一致),如果您正在制作液体布局表单,则可能需要在' % '中设置样式。无论哪种方式,样式表都可能比内联样式属性更可取。

您仍然需要size <select multiple>来获得与选项正确对齐的高度。但我不会在<input>上使用它。

如果你使用宽度(第二个例子),你会得到更多的一致性。