INPUT和SELECT元素自定义大小

时间:2009-05-30 08:57:28

标签: html css resize html-select html-input

据我所知,width / padding / margin属性仅适用于块级元素。但是,在INPUT和SELECT元素上,我可以指定宽度,这是有效的。应该吗?

我可以这样写:

<input type="text" style="display:block;" />

但是有必要吗?

任何人都可以解释为什么它有效?

5 个答案:

答案 0 :(得分:4)

实际上,它们不是真正的内联元素,而是内联块元素。这允许您指定宽度,高度和其他特定于块的属性,而无需中断内联元素的流动。 In good browsers你可以在任何元素上使用“display:inline-block”来实现同样的目的。

答案 1 :(得分:4)

The spec says

  

适用于:所有元素,但未替换的内联元素,表行和行组

表单控件(如输入和选择元素)是替换内联元素(该元素将替换为表单控件 - 其文本内容不会像普通元素一样显示)。

由于它们被替换,因此它们不是未替换的,因此width属性适用。

答案 2 :(得分:0)

表单元素是HTML / CSS世界的黑羊 - 有许多属性不像普通的HTML元素那样工作。

虽然它没有回答您的问题,但您可能会发现以下讨论很有趣:http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

答案 3 :(得分:0)

从技术上讲,这是一个特定于浏览器的渲染属性。此时大多数浏览器都允许您设置宽度,但不能保证(特别是在较旧的浏览器上),并且您肯定可以遇到错误。

输入元素的W3规范在技术上使其成为内联元素。内联块甚至不是W3规范的一部分,它是CSS2的一部分(因此旧版浏览器不一致)。

例如,如果你将宽度指定为百分比并将大量文本放入其中,IE会有一些有趣的错误。

长话短说,它几乎总是安全的,不是我见过的任何官方规范的一部分。

答案 4 :(得分:-1)

如果不可能的话,你发生了什么事吗?当引入INPUT元素时,没有CSS。在HTML中绝对需要INPUT元素的宽度来创建适当的表单。