Css 字段的宽度：自动

发布于01月07日

新手CSS问题.我以为display:block元素的width:auto表示"填满可用的空间".然而，对于<input>元素，情况似乎并非如此.例如:

<body>
  <form style='background:red'>
    <input type='text' style='background:green; display:block; width:auto'>
  </form>
</body>

那么有两个问题:

width:auto到底意味着什么有定义吗？CSS规范对我来说似乎很模糊，但可能我错过了相关部分.
有没有一种方法可以实现输入字段的预期行为，即像其他块级元素那样填充可用空间？

谢谢!

推荐答案

<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>