Html 默认输入元素大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11748575/
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
Default input element size
提问by o_O
The input element by default is size="20" if this is not defined inline or a CSS style rule is attributed to it.
如果没有内联定义或归因于 CSS 样式规则，则输入元素默认为 size="20"。
How do you make the default the actual size of the value? For other elements:
你如何使默认值的实际大小？对于其他元素：
<div style="display: inline; width: auto;">
The box will only fit the width of it's content
</div>
width: auto is all you need. I cannot put a defined width since the value may be longer. For example:
width: auto 就是你所需要的。我无法定义宽度，因为该值可能更长。例如：
<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />
I want #short to be the size of 1000 (essentially size="4" + the padding) but the #long to be as long as needed. These inputs are coming in programatically so I can't simply put a short class on the one's I want short and a long class on the one's I want long. I would really just like it if I could put:
我希望 #short 是 1000 的大小（本质上是 size="4" + 填充），但 #long 是需要的那么长。这些输入是以编程方式输入的，所以我不能简单地在我想要的短课上放一个短课，在我想要长的课上放一个长课。如果可以的话，我真的很喜欢它：
input { width: auto; }
Anyway to do this?
无论如何要做到这一点？
回答by Sato
The input element by default is size="20"
输入元素默认为 size="20"
This "default size" depends on the browser, the version and your OS. It is not possible to do this in inline styles.
此“默认大小”取决于浏览器、版本和您的操作系统。在内联样式中无法做到这一点。
the best solution is to set width and padding so it adds up to 100%
最好的解决方案是设置宽度和填充，使其加起来为 100%
input {
width: 98%;
padding: 1%;
}
then set it to absolute left and right 0
然后将其设置为绝对左右 0
<fieldset>
<input type="text" />
</fieldset>
finally add this css
最后添加这个css
<style type="text/css">
fieldset {
position: relative;
}
input {
position: absolute;
left: 0;
right: 0;
}
</style>
回答by Fabricio
"How do you make the default the actual size of the value? (...) I would really just like it if I could put: input { width: auto; } Anyway to do this?"
“你如何使默认值成为实际值的大小？（...）如果我可以输入： input { width: auto; } 无论如何要做到这一点，我真的很喜欢它？”
In an Input HTML Element, widthis controlled by its sizeattribute. This is a quick way I use to simulate { width: auto; }, and it is browsers dependance proof:
在Input HTML Element 中，width由其size属性控制。这是我用来模拟的一种快速方法{ width: auto; }，它是浏览器依赖性证明：
<input type="text" [size]="element.value.length + 1" #element>
回答by mefopolis
Assuming you have each input on its own row in the form, you can set size attribute to the desired size but also add a css of:
假设您在表单中的每个输入行上都有自己的输入，您可以将 size 属性设置为所需的大小，但还可以添加以下 css：
input[type="text"] {
max-width: 100%;
}
This ensures that the field does not overflow the form. This approach gives a visual cue of how much data is expected for short fields (because they will be the right size) while putting a cap on long ones.
这可确保该字段不会溢出表单。这种方法给出了一个视觉提示，即短字段的预期数据量（因为它们将是正确的大小），同时对长字段设置上限。
