为什么input可以设置宽度_html/css_WEB-ITnose
一直对这个问题相当的不解,按照css的定义,行内(内联)元素不是不可以设置宽度高度吗,为神马身为行内元素的input却可以呢?有没有大牛解释下
回复讨论(解决方案)
早,
那就说明input不是行内(内联)元素,是不是行内元素,完全可以通过CSS的定义来切换
用firebug看下你就知道是不是行内元素了,以前我一直想当然的以为input是inline-block,今天才发现,这货原来就是一活生生的inline元素,为什么这货可以设置宽度呢,这是为什么呢?
某次布局时无意发现一个有意思的问题。就是之前前的观念是是内联元素,而内联元素的宽高都是不能定的。但是很明显是可以给宽高的,为什么呢?要想弄清楚,首先我们要弄清inline-block这个属性,请点击这里查看:inline-block属性。其实很简单,inline-block特性就是元素的外部是内联元素,而内部确是块级元素特性,而天生的inline-block属性。这样就好解释了,元素并没有另起一行,因为它的外部是内联元素,但它可以定宽高,因为它的内部是块级元素。所以在说内联元素和块级元素的时候,一定要将做为一个特例来理解。..
这是某个人的解释。。。
大致这样理解:
行内(内联)元素是相对于左右两边元素而言,于其它兄弟元素可同在一行内显示的可称行内元素,对于仅仅是数据显示类元素如span等,估计不能设置宽高吧,对于输入类元素,如input等可以设置高度。。。看来应该这样理解,
某次布局时无意发现一个有意思的问题。就是之前前的观念是是内联元素,而内联元素的宽高都是不能定的。但是很明显是可以给宽高的,为什么呢?要想弄清楚,首先我们要弄清inline-block这个属性,请点击这里查看:inline-block属性。其实很简单,inline-block特性就是元素的外部是内联元素,而内部确是块级元素特性,而天生的inline-blo…… 我以前就是这样理解的,但是。。还是你自己用firebug看一下吧。。
什么是行内元素,什么是块级元素我懂,请不要给我扫盲好吗。。
好吧,经过测试原来这是firefox的bug。。
<!doctype><html><head> <style> </style></head><body> <input type="text" value="text" id="input"/> <script> var input = document.getElementById('input'), input_style = window.getComputedStyle ? window.getComputedStyle(input, null) : input.currentStyle; alert(input_style.display); </script></body></html>
就这么规定的
行内元素 button img都可以设置宽度。。。怎么解释
好吧,经过测试原来这是firefox的bug。。JScript code
<script> <br /> var input = document.getEl…… <br /> <br /> 谁说的IE6不支持inline-block?或者你是从哪里看到的? </script>

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen





HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
