width：自动用于<input>字段

122

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

然后有两个问题：

是否确切定义了width：auto的含义？CSS规范对我来说似乎很模糊，但也许我错过了相关部分。
有没有一种方法可以实现我对输入字段的预期行为-即。像其他块级元素一样填充可用空间？

谢谢！

css

— 富有
source

与display：block

— Phrogz 2011年

@Phrogz是的，它是重复的。我搜索了但没有找到。谢谢。

— richb 2011年

88

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

— 本
source

24

谢谢。宽度：100％不一样。如果有边距或边框，它将使父框溢出。

— richb 2011年

1

您可以显式设置这些设置以调整所需的方式，例如border:2px inset #eee; margin:-2px。虽然我自己还没有测试过，但是却遵循了这些原则。

— 奔

3

谢谢史蒂夫。您还应该查看stackoverflow.com/questions/1030793/…，其中还有其他一些有趣的想法。

— richb 2011年

1

史诗般的解决方案，在输入字段上通过CSS来实现一致的宽度，+ 1

— Stephen Sprinkle

11

您可以使用将输入框大小设置属性设置为border-box来阻止边框与容器重叠。

— 尼古拉斯

26

“是否确切定义了width：auto的含义？对我来说CSS规范似乎含糊不清，但也许我错过了相关章节。”

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

答案如下：http : //www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

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

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

为了显示差异，我举了一个例子：http : //www.456bereastreet.com/lab/width-auto/

— 响应
source

4

不错的答案/链接，我建议举一个“ box-sizeing：border-box”的第三个例子……

— Halfbit'1

那不是输入，因为默认是自动的，所以我看不出它有什么用

— Barbz_YHOOL

9

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

您可以使用一些解决方法使它与Box模型配合使用，但据我所知，这并不是什么奇妙的选择。

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

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

您可能要尝试的另一件事是使用绝对定位，将left和right设置为0。使用此标记：

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

而这个CSS：

fieldset {
  position: relative;
}

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

这种绝对定位将导致输入水平填充父级字段集，而不考虑输入的填充或边距。但是，这样做的一个巨大缺点是您现在必须处理字段集的高度，除非您将其设置为0。如果输入的高度都相同，那么将其设置为任意高度，只需将字段集的高度设置为输入的高度即可。

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

— 乔恩·拉施
source

8

由于input的width由的size属性控制，因此这是我根据其内容初始化的方式input width：

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— 织物
source

1

尽管此#angular特定答案不是对OP的问题的有效答案（并且我不反对），但我确实是为了找到此特定想法而来到此主题的。

— nobug

5

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

— 麦考克斯
source

0

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

— 拉霍斯·梅萨罗斯
source

0

答案1-“响应”为此提供了一个很好的答案/链接。简而言之，“ auto”是默认设置，因此就像删除元素宽度上的任何更改一样

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

— 阿基尔·古普塔（Akhil Gupta）
source

-4

绝对惊人的链接，描述了一个绝对惊人的功能：

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

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

要点：

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

编辑- 示例：

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

— 安德鲁
source

这对输入的自动宽度有何帮助？

— 内核

@kernel简单。参见示例。

— 安德鲁（Andrew）

输入的宽度始终为100％，而不是最小的宽度。

— 内核

2

输入的宽度仍然与其内容不同，这就是问题所在。

— 内核

如果您阅读了被接受的-以及其他所有人的-回答，它会有所不同。问题将是“每个人都做错了，你在做什么正确？”。

— 内核