宽度：自动为<input>字段

新手CSS问题。我认为width:auto对于display:block元素意味着'填充可用空间'。然而，对于<input>元素来说，这似乎并不是这种情况。例如：然后宽度：自动为<input>字段

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

两个问题：

有没有的到底是什么宽度的定义：汽车意味着什么？ CSS规范对我来说似乎很模糊，但也许我错过了相关章节。
有没有办法实现我的输入字段的预期行为 - 即。像其他块级别的元素填充可用空间吗？

谢谢！

来源

2011-01-07 richb

[input with display：block is not a block，why why？]（http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-不） – Phrogz 2011-01-07 03:26:28

@Progrog是的，它是重复的。我搜查了但没有找到它。谢谢。 – richb 2011-01-07 03:44:00

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

来源

2011-01-07 02:54:14 Ben

+20

谢谢。宽度：100％是不一样的东西。如果有边距或边框，它会溢出父框。 – richb 2011-01-07 02:56:02

您可以明确设置这些以调整您的想法，例如`border：2px inset #eee;保证金：-2px`。虽然我自己没有测试过，但是还是沿着这些线测试过。 – Ben 2011-01-07 02:58:52

正如其他答案指出，宽度：汽车不因宽度工作由生成输入的大小属性，不能设置为“自动”或类似的东西。

有几个解决方法，您可以使用以使其与盒模型发挥很好，但没有什么神奇的，据我所知。

首先，你可以用百分比设置在该领域的填充，确保宽度加起来为100％，例如：

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

你可以尝试使用绝对定位，左，右的另一件事设置为0，使用这个标记：

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

而这个CSS：

fieldset { 
    position: relative; 
} 

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

无论输入的填充或边距如何，此绝对定位都将导致输入水平填充父字段集。然而，这样做的一个巨大缺点是你现在必须处理fieldset的高度，除非你设置它，否则它将为0。如果你的输入高度相同，这将适用于你，只需将fieldset的高度设置为任何输入的高度即可。

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

来源

2012-05-17 15:11:08

我能想到的唯一选择是使用width:100%。如果您还想在输入字段上填充填充，则只需在其周围放置一个容器label，然后将格式移至该标签，同时还为标签指定填充。输入字段是严格的。

来源

2013-08-07 13:34:32

“确实有什么宽度的定义：auto的意思是？CSS 规范对我来说似乎很模糊，但也许我错过了相关章节。”

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

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

只要宽度值是自动，元素可以有水平的margin，padding和边框没有变得比它的容器更宽......

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

形象化我做出了榜样的区别： http://www.456bereastreet.com/lab/width-auto/

来源

2013-10-27 01:08:35 response

它可能不是正是你想要的，但我的解决方法是将autowidth造型适用于包装DIV - 然后设定输入100 ％。

来源

2014-03-09 00:09:20 mwilcox

答案1 - “响应”给了它一个很好的答案/链接。简而言之，“auto”是默认设置，所以它就像删除元素宽度的任何变化。

答案2 - 使用width: 100%来代替。它将填充父容器的100％，在这种情况下是“表单”。

来源

2015-11-05 14:31:16

宽度：自动为<input>字段

回答

相关问题