Html 输入大小与宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1480588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input size vs width
提问by rajakvk
<input name="txtId" type="text" size="20" />
or
或者
<input name="txtId" type="text" style="width: 150px;" />
Which one is optimal cross-browser code?
哪个是最佳的跨浏览器代码？
Of course it depends on requirements, but I'm curious to know how people decide and on what basis.
当然，这取决于要求，但我很想知道人们如何决定以及基于什么决定。
采纳答案by Mark Bell
You can use both. The css style will override the sizeattribute in browsers that support CSS and make the field the correct width, and for those that don't, it will fall back to the specified number of characters.
您可以同时使用两者。css 样式将size在支持 CSS 的浏览器中覆盖该属性并使字段具有正确的宽度，对于那些不支持的浏览器，它将回退到指定的字符数。
Edit:I should have mentioned that the sizeattribute isn't a precise method of sizing: according to the HTML specification, it shouldrefer to the number of characters of the current font the input will be able to display at once.
编辑：我应该提到该size属性不是一种精确的大小调整方法：根据 HTML 规范，它应该指输入将能够一次显示的当前字体的字符数。
However, unless the font specified is a fixed-width/monospace font, this is nota guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This questionhas some good answers relating to this issue.
但是，除非指定的字体是固定宽度/等宽字体，否则这并不能保证指定数量的字符实际上是可见的；在大多数字体中，不同的字符会有不同的宽度。这个问题有一些关于这个问题的很好的答案。
The snippet below demonstrates both approaches.
下面的代码片段演示了这两种方法。
@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>回答by Thinker
I suggest, probably best way is to set style's width in em unit :) So for input size of 20 characters just set style='width:20em':)
我建议，可能最好的方法是以 em 为单位设置样式的宽度 :) 所以对于 20 个字符的输入大小，只需设置style='width:20em':)
回答by bobince
sizeis inconsistent across different browsers and their possible font settings.
size不同浏览器及其可能的字体设置不一致。
The widthstyle set in px will at least be consistent, modulo box-sizing issues. You might also want to set the style in ‘em' if you want to size it relative to the font (though again, this will be inconsistent unless you set the input's fontfamily and size explicitly), or ‘%' if you are making a liquid-layout form. Either way, a stylesheet is probably preferable to the inline styleattribute.
widthpx 中设置的样式至少是一致的，模框大小问题。如果您想相对于字体调整其大小，您可能还想在 'em' 中设置样式（尽管如此，这将是不一致的，除非您font明确设置输入的系列和大小），或者如果您正在制作一个 '%'液体布局形式。无论哪种方式，样式表都可能比 inlinestyle属性更可取。
You still need sizefor <select multiple>to get the height to line up with the options properly. But I'd not use it on an <input>.
您还需要size为<select multiple>这个高度与正确的选项来排队。但我不会在<input>.
回答by ibrewster
I want to say this goes against the "conventional wisdom", but I generally prefer to use size. The reason for this is precisely the reason that many people say not to: the width of the field will vary from browser to browser, depending on font size. Specifically, it will always be large enough to display the specified number of characters, regardless of browser settings.
我想说这与“传统智慧”背道而驰，但我通常更喜欢使用大小。这样做的原因恰恰是很多人说不要的原因：字段的宽度会因浏览器而异，具体取决于字体大小。具体来说，无论浏览器设置如何，它总是足够大以显示指定数量的字符。
For example, if I have a date field, I typically want the field wide enough to display either 8 or 10 characters (two digit month and day and either two or four digit year, with separators). Setting the size attribute essentially guarantees me that the entire date will be visible, with minimal wasted space. Similarly for most numbers - I know the range of values expected, so I'll set the size attribute to the proper number of digits, plus decimal point if applicable.
例如，如果我有一个日期字段，我通常希望该字段足够宽以显示 8 或 10 个字符（两位数的月份和日期以及两位或四位数字的年份，带分隔符）。设置 size 属性基本上可以保证整个日期都可见，并且浪费的空间最少。对于大多数数字，类似 - 我知道预期值的范围，所以我将 size 属性设置为适当的位数，如果适用，加上小数点。
As far as I can tell, no CSS attribute does this. Setting a width in em, for example, is based off the height, not the width, and thus is not very precise if you want to display a known number of characters.
据我所知，没有 CSS 属性可以做到这一点。例如，在 em 中设置宽度是基于高度而不是宽度，因此如果您想显示已知数量的字符，则不是很精确。
Of course, this logic doesn't always apply - a name entry field, for example, could contain any number of characters. In those cases I'll fall back to CSS width properties, typically in px. However, I would say the majority of fields I make have some sort of known content, and by specifying the size attribute I can make sure that mostof the content, in mostcases, is displayed without clipping.
当然，这种逻辑并不总是适用——例如，姓名输入字段可以包含任意数量的字符。在这些情况下，我会回到 CSS 宽度属性，通常以 px 为单位。但是，我会说我制作的大多数字段都有某种已知内容，并且通过指定 size 属性，我可以确保在大多数情况下大部分内容都显示而不会被剪裁。
回答by mark
I just got through fighting with a table that I couldn't make any smaller no matter which element I tried to make smaller the width of the table stayed the same. I searched using firebug but couldn't find the element that was setting the width so high.
我刚刚解决了一张桌子，无论我试图缩小哪个元素，我都无法缩小它，但桌子的宽度保持不变。我使用 firebug 进行搜索，但找不到将宽度设置得如此高的元素。
Finally I tried changing the size attributeof the input text elements and that fixed it. For some reason the size attributeover-rode the css widths. I was using jQuery to dynamically add rows to a table and it was these rows that contained the inputs. So perhaps when it comes to dynamically adding inputs using the appendTo() function maybe it is better to set the size attributealong with the width.
最后，我尝试更改输入文本元素的大小属性并修复它。出于某种原因，size 属性超过了 css 宽度。我使用 jQuery 将行动态添加到表中，这些行包含输入。因此，也许在使用 appendTo() 函数动态添加输入时，最好将size 属性与宽度一起设置。
回答by shah
You can resize using style and width to resize the textbox. Here is the code for it.
您可以使用样式和宽度调整大小来调整文本框的大小。这是它的代码。
<!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>Use align to center the textbox.
使用 align 使文本框居中。
回答by chrisbowman22
Both the sizeattribute in HTML and the widthproperty in CSS will set the width of an <input>. If you want to set the width to something closer to the width of each character use the **ch**unit as in:
无论是size在HTML属性和width在CSS属性将设置的宽度<input>。如果要将宽度设置为更接近每个字符的宽度，请使用以下**ch**单位：
input {
width: 10ch;
}
回答by Matt Howell
You'll get more consistency if you use width (your second example).
如果您使用宽度（您的第二个示例），您将获得更多的一致性。
回答by Chris Sobolewski
HTML controls the semantic meaning of the elements. CSS controls the layout/style of the page. Use CSS when you are controlling your layout.
HTML 控制元素的语义含义。CSS 控制页面的布局/样式。在控制布局时使用 CSS。
In short, never use size=""
简而言之，永远不要使用 size=""
