css input 自动宽度,css - width：auto表示<input>字段

css - width：auto表示字段

新手CSS问题。 我认为width:auto对于display:block元素意味着'填充可用空间'。 然而，对于元素，情况似乎并非如此。 例如：

那么两个问题：

究竟有什么宽度的定义：auto是什么意思？ CSS规范对我来说似乎含糊不清，但也许我错过了相关部分。

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

谢谢！

richb asked 2019-08-07T01:31:54Z

8个解决方案

67 votes

的宽度由其width:100%属性生成。 默认size是驱动自动宽度的原因。

您可以尝试width:100%，如下面的示例所示。

不填充宽度：

填充宽度：

尺寸更小，宽度更小：

UPDATE

这是几分钟后我能做的最好的事情。 它在FF，Chrome和Safari中只有1个像素，在IE中也很完美。 (问题是＃^＆amp; * IE以不同于其他所有人的方式应用边框，因此它不一致。)

Ben answered 2019-08-07T01:32:43Z

24 votes

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

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

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

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

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

为了可视化差异我做了一个例子：  [http://www.456bereastreet.com/lab/width-auto/]

response answered 2019-08-07T01:33:44Z

8 votes

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

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

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

input {

width: 98%;

padding: 1%;

}

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

这个CSS：

fieldset {

position: relative;

}

input {

position: absolute;

left: 0;

right: 0;

}

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

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

Jon Raasch answered 2019-08-07T01:34:49Z

4 votes

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

mwilcox answered 2019-08-07T01:35:14Z

0 votes

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

Lajos Meszaros answered 2019-08-07T01:35:41Z

0 votes

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

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

Akhil Gupta answered 2019-08-07T01:36:15Z

0 votes

因为width的width是由它的size属性所控制，这是我如何根据其内容初始化input width：

Fabricio answered 2019-08-07T01:36:42Z

-2 votes

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

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

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

要旨：

将元素放入容器中，格式为

。

在每个包含的元素上设置

。

如果包含的元素中的元素也需要增长，请对包含的元素及其(包含的)子元素重复步骤1和2。

根据不同的需求进行调整和调整(参见链接)。

编辑 - 示例：

Andrew answered 2019-08-07T01:38:12Z