CSS新手问题。我想width:auto for a display:block元素的意思是“填充可用空间”。然而对于一个<input>元素这似乎并非如此。例如：
<body>
<form style='background:red'>
<input type='text' style='background:green; display:block; width:auto'>
</form>
</body>
那么两个问题：
-
有没有具体的定义width:auto是什么意思？ CSS 规范对我来说似乎很模糊，但也许我错过了相关部分。
-
有没有办法实现我对输入字段的预期行为 - 即。像其他块级元素一样填充可用空间吗？
Thanks!
An <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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
