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

input {
    width: 10ch;
}

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

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

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

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

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

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

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

input {
    width: 10ch;
}

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

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

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