1. 首页
  2. 问题
  3. 宽度：自动 领域
一尘不染

宽度：自动 领域

css

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

然后有两个问题：

  1. 是否确切定义了width：auto的含义？CSS规范对我来说似乎很模糊，但是也许我错过了相关的部分。

  2. 有没有一种方法可以实现我对输入字段的预期行为-即。像其他块级元素一样填充可用空间？

谢谢！


阅读 188

收藏
2020-05-16

共1个答案

一尘不染

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

更新

几分钟后，这是我能做的最好的事情。在FF，Chrome和Safari中关闭1像素，在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>
2020-05-16