width：auto为<input>字段
新手CSS的问题。 我认为width:auto display:block元素意味着“填补可用空间”。 但是对于一个<input>元素，这似乎并不是这种情况。 例如：
<body> <form style='background-color:red'> <input type='text' style='background-color:green;display:block;width:auto'> </form> </body>
那么两个问题：
-
有什么宽度的定义：汽车的意思是？ CSS规范对我来说似乎很模糊，但也许我错过了相关的部分。
-
有没有一种方法来实现我对input字段的预期行为 – 即。 像其他块级别的元素填充可用空间吗？
谢谢！
一个<input>的宽度是从其size属性生成的。 默认size是驱动自动宽度的。
你可以尝试width:100% ，如下面的例子所示。
不填充宽度：
<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比其他人应用的边界不同，所以不一致。）
<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>
“有什么宽度的定义：auto是什么意思？CSS规范对我来说似乎很模糊，但也许我错过了相关章节。
没有人真正回答了原来的海报问题的上述部分。
以下是答案： http : //www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
只要宽度的值是auto，元素可以有水平边距，填充和边框，而不会比其容器更宽。
另一方面，如果你指定宽度：100％，元素的总宽度将是其包含块的100％加上任何水平边距，填充和边框…这可能是你想要的，但最有可能的不是。
为了显示差异，我做了一个例子： http : //www.456bereastreet.com/lab/width-auto/
正如在另一个答案中所述，宽度：自动不工作由于input的大小属性生成的宽度，不能设置为“自动”或类似的东西。
有几个解决方法可以用来使它与盒子模型很好地配合，但是就我所知，没有什么奇妙的。
首先，您可以使用百分比在字段中设置填充，确保宽度合计为100％，例如：
input { width: 98%; padding: 1%; }
你可能会尝试的另一件事是使用绝对定位，左和右设置为0.使用这个标记：
<fieldset> <input type="text" /> </fieldset>
而这个CSS：
fieldset { position: relative; } input { position: absolute; left: 0; right: 0; }
这种绝对定位将导致input水平填充父字段集，而不pipeinput的填充或边距。 然而，这样做的一个巨大的缺点是你现在必须处理fieldset的高度，除非你设置它，否则它将是0。 如果您的input高度相同，这将适用于您，只需将字段集的高度设置为input的高度即可。
除此之外，有一些JS解决scheme，但我不喜欢与JS应用基本的样式。
它可能不是正是你想要的，但我的解决方法是将autowidth样式应用到包装div – 然后将您的input设置为100％。
我能想到的唯一select是使用width:100% 。 如果要在input字段上填充填充字符，则只需在其周围放置一个容器label ，然后将格式转换为该标签，同时还要为标签指定填充。 input字段是严格的。
答案1 – “回答”给了它一个很好的答案/链接。 简而言之，“auto”是默认的，所以就像删除元素宽度的任何变化一样
答案2 – 使用width: 100% 。 它将填充父容器的100％，在这种情况下是“表格”。
