输入大小与宽度

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

或者

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

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

当然，这取决于需求，但我很想知道人们是如何决定的，以及基于什么决定的。

544254 次浏览
小开
最佳答案

你可以两者都用。css样式将覆盖支持css的浏览器中的size属性，并使字段具有正确的宽度，对于那些不支持css的浏览器，它将返回到指定的字符数。

我应该提到，size属性不是一个精确的大小调整方法:根据HTML规范，它应该指的是输入一次能够显示的当前字体的字符数。

然而，除非指定的字体是固定宽度/单行字体，否则这是不，保证指定的字符数量将实际可见;在大多数字体中，不同的字符有不同的宽度。这个问题有一些关于这个问题的好答案。

下面的代码段演示了这两种方法。

@font-face {
font-family: 'Diplomata';
font-style: normal;
font-weight: 400;
src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
margin: 0 0 10px 0;
}
input {
font-size: 20px;
}
.narrow-font {
font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
font-family: 'Diplomata', cursive;
}
.set-width {
width: 220px;
}
<p>
<input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
<input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
<input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
<input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

小开

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

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

小开

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

小开

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

小开

size在不同的浏览器及其可能的字体设置中是不一致的。

px中设置的width样式至少是一致的，对box-sizing问题取模。如果你想要相对于字体来设置样式的大小，你也可以在' em '中设置样式(不过，这将是不一致的，除非你显式地设置输入的font族和大小)，或者如果你正在创建一个液体布局表单，则设置' % '。无论哪种方式，样式表可能比内联style属性更可取。

你仍然需要size为<select multiple>获取高度，以正确地与选项对齐。但我不会在<input>上使用它。

小开

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

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

小开

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body>
<div align="center">


<form method="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>
</form>
</div>
</body>
</html>

使用align将文本框居中。

小开

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

input {
width: 10ch;
}
小开

举个有意义的例子

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

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

看到这Codepen。


提交答案