Question

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

然后有两个问题：

是否有确切宽度的定义：auto是什么意思？ CSS规范对我来说似乎含糊不清，但也许我错过了相关部分。
有没有办法实现我对输入字段的预期行为 - 即。像其他块级元素一样填充可用空间吗？

谢谢！

Answer 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中也很完美。（问题是＃^＆amp; * 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>

Answer 2

“是否有确切宽度的定义：auto的意思是什么？CSS spec似乎对我来说很模糊，但也许我错过了相关部分。“

没有人真正回答原始海报问题的上述部分。

这是答案： http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

只要width的值为auto，元素就可以是水平的   边距，填充和边框不会比容器宽......

另一方面，如果指定width：100％，则为元素的总和   宽度将是其包含块的100％加上任何水平边距，   填充和边框...这可能是你想要的，但很可能不是。

为了想象差异我做了一个例子：   http://www.456bereastreet.com/lab/width-auto/

Answer 3

如另一个答案中所述，宽度：auto不起作用，因为输入的size属性生成宽度，不能设置为“auto”或类似的东西。

您可以使用一些变通方法使其与盒子模型很好地配合，但据我所知，没什么了不起的。

首先，您可以使用百分比在字段中设置填充，确保宽度加起来为100％，例如：

input {
  width: 98%;
  padding: 1%;
}

您可能尝试的另一件事是使用绝对定位，左右设置为0.使用此标记：

<fieldset>
    <input type="text" />
</fieldset>

这个CSS：

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

此绝对定位将导致输入水平填充父字段集，而不管输入的填充或边距。然而，这是一个巨大的缺点，你现在必须处理字段集的高度，除非你设置它，否则它将为0。如果你的输入都是相同的高度，这对你有用，只需将fieldset的高度设置为输入高度应该是什么。

除此之外还有一些JS解决方案，但我不喜欢在JS中应用基本样式。

Answer 4

它可能不是您想要的，但我的解决方法是将自动宽度样式应用于包装div - 然后将输入设置为100％。

Answer 5

我能想到的唯一选择是使用width:100%。如果您想在输入字段上添加填充，而不是在其周围放置容器label，请将格式设置移动到该标签，同时还指定标签的填充。输入字段很严格。

Answer 6

答案1 - “回复”给出了一个很好的答案/链接。简而言之，“auto”是默认值，因此就像删除元素宽度的任何变化一样

答案2 - 改为使用width: 100%。它将填充100％的父容器，在本例中为“form”。

Answer 7

由于input的{{1}}受其width属性的控制，因此这就是我初始化 size {{ 1}} ，根据其内容：

input

Answer 8

描述绝对惊人功能的绝对惊人链接：

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

要点：

将元素放入带有display: flex;的容器中。
在每个包含的元素上设置flex-grow: 1;。
如果在包含元素中也需要增长的元素，请对包含元素及其（包含的）子元素重复步骤1和2。
根据不同的需求进行调整和调整（请参阅链接）。

编辑-example：

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

width：auto表示<input />字段

8 个答案: