宽度:自动为字段
新手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规范对我来说似乎很模糊,但也许我错过了相关章节。
有没有办法实现我的输入字段的预期行为 - 即。像其他块级别的元素填充可用空间吗?
谢谢!
一种<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>
正如其他答案指出,宽度:汽车不因宽度工作由生成输入的大小属性,不能设置为“自动”或类似的东西。
有几个解决方法,您可以使用以使其与盒模型发挥很好,但没有什么神奇的,据我所知。
首先,你可以用百分比设置在该领域的填充,确保宽度加起来为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应用基本样式。
我能想到的唯一选择是使用width:100%
。如果您还想在输入字段上填充填充,则只需在其周围放置一个容器label
,然后将格式移至该标签,同时还为标签指定填充。输入字段是严格的。
“确实有什么宽度的定义: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/
它可能不是正是你想要的,但我的解决方法是将autowidth造型适用于包装DIV - 然后设定输入100 %。
答案1 - “响应”给了它一个很好的答案/链接。简而言之,“auto”是默认设置,所以它就像删除元素宽度的任何变化。
答案2 - 使用width: 100%
来代替。它将填充父容器的100%,在这种情况下是“表单”。
[input with display:block is not a block,why why?](http://*.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