INPUT 和 SELECT 元素自定义大小
据我了解,宽度/填充/边距属性仅适用于块级元素。 但是,在 INPUT 和 SELECT 元素上,我可以指定宽度,这是有效的。 应该是?
我可以这样写:
<input type="text" style="display:block;" />
但是有必要吗?
谁能解释一下为什么它有效?
As I understand, width/padding/margin properties only work on block level elements. However, on INPUT and SELECT elements I am able to specify the width, which works. Should it?
I could write something like this:
<input type="text" style="display:block;" />
But is it necessary?
Can anyone explain please why it works?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
实际上,它们并不是真正的内联元素,而是内联块元素。 这允许您指定宽度、高度和其他特定于块的属性,而无需中断内联元素的流动。 在好的浏览器中你可以在任何元素上使用“display:inline-block”来实现一样的东西。
Actually, they're not really inline elements, but rather inline-block elements. This allows you to specify width, height and other block-specific properties without the need to break the flow of inline elements. In good browsers you can use "display:inline-block" on any element to achieve the same thing.
规范说:
表单控件,例如 input 和 select 元素是替换内联元素(该元素被替换为表单控件 - 文本它的内容不像普通元素那样显示)。
由于它们被替换,因此它们不是不可替换的,因此宽度属性适用。
The spec says:
Form controls, such as input and select elements are replaced inline elements (the element is replaced with a form control - the text content of it is not displayed like a normal element).
Since they are replaced, they are not non-replaced, so the width property applies.
表单元素是 HTML/CSS 世界中的害群之马 - 有很多属性不能像普通 HTML 元素一样工作。
虽然它没有回答您的问题,但您可能会发现以下讨论很有趣: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
Form elements are the black sheep of the HTML/CSS world - there's lots of properties which don't work like normal HTML elements.
While it doesn't answer yor question, you might find the following discussion interesting: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
从技术上讲,这是特定于浏览器的渲染属性。 此时,大多数浏览器确实允许您设置宽度,但不能保证(尤其是在较旧的浏览器上),并且您肯定可能遇到错误。
从技术上讲,输入元素的 W3 规范使其成为内联元素。 Inline-block 甚至不是 W3 规范的一部分,它是 CSS2 的一部分(因此旧版浏览器不一致)。
例如,如果您将宽度指定为百分比并在其中放入大量文本,则 IE 会出现一些有趣的错误。
长话短说,它几乎总是安全的,只是不属于我见过的任何官方规范的一部分。
Technically, that's a rendering property which is browser-specific. At this point most browsers do allow you to set the width, but it's not guaranteed (especially on older browsers) and you definitely can run into bugs with it.
The W3 spec for the input element technically makes it an inline element. Inline-block isn't even a part of the W3 spec, it's part of CSS2 (hence older browsers being inconsistent).
IE has some funny bugs if you specify width as a percentage and put a whole lot of text into it, for example.
Long story short, it's almost always safe, just not part of any official spec that I've seen.
如果那不可能的话,你想过会发生什么吗? 当引入 INPUT 元素时,还没有 CSS。 在 HTML 中,为了创建正确的表单,INPUT 元素的宽度是绝对必需的。
Did you thing what happened if that would be not possible? When INPUT element was introduced there was no CSS. And width of INPUT element is absolutely required in HTML for creating proper forms.