width：auto for< input>字段 [英] width:auto for <input> fields
问题描述
新手CSS问题。我认为 width：auto 为 display：block 元素意味着填充可用空间。但是对于< input> 元素，似乎不是这样。例如：
Newbie CSS question. I thought width:auto for a display:block element meant 'fill available space'. However for an <input> element this doesn't seem to be the case. For example:
<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>
两个问题：
-
有什么宽度的定义：auto是什么意思？
Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section.
有一种方法可以实现我对输入字段的预期行为 - ie。像其他块级元素一样填充可用空间？
Is there a way to achieve my expected behaviour for a input field - ie. fill available space like other block level elements do?
谢谢！
推荐答案
< input> 的宽度由 $ c>属性。默认 size 是驱动自动宽度的原因。
An <input>'s width is generated from its size attribute. The default size is what's driving the auto width.
您可以尝试 width：100
You could try width:100% as illustrated in my example below.
不填满宽度：
<form action='' method='post' style='width:200px;background:khaki'>
<input style='width:auto' />
</form>
填充宽度：
<form action='' method='post' style='width:200px;background:khaki'>
<input style='width:100%' />
</form>
尺寸较小，宽度较小：
<form action='' method='post' style='width:200px;background:khaki'>
<input size='5' />
</form>
UPDATE
这里是我能做的最好的几分钟后。它在FF，Chrome和Safari的1px关闭，并完美的在IE。 （问题是＃^& * IE应用边框的方式与其他人不同，因此不一致。）
Here's the best I could do after a few minutes. It's 1px off in FF, Chrome, and Safari, and perfect in IE. (The problem is #^&* IE applies borders differently than everyone else so it's not consistent.)
<div style='padding:30px;width:200px;background:red'>
<form action='' method='post' style='width:200px;background:blue;padding:3px'>
<input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
<br /><br />
<input size='' style='width:100%' />
</form>
</div>
这篇关于width：auto for< input>字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
