Spannweiteneinstellung
Wie stelle ich die Spannweite in HTML ein? Dies scheint ein sehr einfaches Problem zu sein. Es scheint, dass Sie das width-Attribut einfach im Stil verwenden können.
Die Breiteneinstellung von span ist standardmäßig ungültig.
Wie stelle ich die Breite von span in HTML ein? Dies scheint ein sehr einfaches Problem zu sein. Es scheint, dass Sie das width-Attribut einfach im Stil verwenden können. Beispielsweise wurde
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
width:150px;
}
</style>
</head>
<body>
fixed <span>width</span> span
</body>
</html>nach bestandenem Test als ungültig befunden, egal ob in Firefox oder IE.
Bei der Betrachtung der Definition von width im CSS2-Standard haben wir festgestellt, dass das width-Attribut in CSS nicht immer gültig ist. Wenn das Objekt ein Inline-Objekt ist, wird das width-Attribut ignoriert. Firefox und IE haben dies ursprünglich in Übereinstimmung mit Standards getan.
Span auf Blocktyp zu ändern und Float festzulegen ist keine perfekte Lösung
Fügen Sie das Anzeigeattribut im CSS von Span hinzu und setzen Sie Span auf Blocktyp-Element. Auf diese Weise ist die Breite zwar effektiv, aber es ändert sich auch Der vorangehende und folgende Text sind in verschiedene Zeilen unterteilt. Auf diese Weise wird span tatsächlich vollständig zu p.
span { background-color:#ffcc00; display:block; width:150px; }Viele Leute schlagen vor, ein weiteres CSS-Attribut float hinzuzufügen, was das Problem unter bestimmten Bedingungen tatsächlich lösen kann. Wenn in unserem Beispiel beispielsweise kein Text vor span steht, ist dies tatsächlich machbar. Wenn dies jedoch der Fall ist, werden der Text davor und danach miteinander verbunden und span läuft bis zur zweiten Zeile.
span {
background-color:#ffcc00;
display:block;
float:left;
width:150px;
}Button case
Tatsächlich gibt es unter den verschiedenen Elementen in HTML tatsächlich Situationen, in denen es sowohl inline ist als auch die Breite festgelegt werden kann. Der folgende Code zeigt beispielsweise das Schaltflächenobjekt an, das in der Mitte des Textes erscheinen und die Breite festlegen kann.
<body> fixed <button style="width:150px;">width</button> button </body>
Kann span wie eine Schaltfläche angezeigt werden? Durch die Definition der Anzeige und die Erläuterung des Inline-Objekts im CSS2-Standard haben wir herausgefunden, dass die Hersteller des CSS2-Standards Entweder-Oder-Regelungen darüber gemacht haben, ob alle Elemente zu Inline gehören, entweder Inline oder Block, und dass es keine solche gibt Ding als Schaltfläche Inline können Sie den Breitenattributwert wie Block festlegen.
Aktualisierter Standard CSS 2.1
Mit Blick auf den aktualisierten Standard wurde der Definition der Anzeige im CSS2.1-Standardentwurf ein Attributwert namens „inline-block“ hinzugefügt, der nur für uns bestimmt ist mit dieser Situation konfrontiert. Schauen Sie sich dann die entsprechenden Situationen verschiedener Browser an.
Firefox
Aus der Display-Dokumentation habe ich erfahren, dass Inline-Block in Zukunft in Firefox 3 implementiert wird. Durch die erweiterte Attributreferenz von Mozllia haben wir erfahren, dass Sie in Versionen vor Firefox 3, wie z. B. dem aktuellen Firefox 2, -moz-inline-box verwenden können, um den gleichen Effekt zu erzielen.
IE
Ich habe aus der Anzeigedokumentation in MSDN erfahren, dass Inline-Block implementiert wurde. Der eigentliche Test ergab, dass nach IE 6.0 kein Problem mehr vorliegt.
Perfekte Lösung
Die CSS-Definition des folgenden Codes löst das Problem der Spannweiteneinstellung perfekt. Da Browser normalerweise nicht unterstützte CSS-Eigenschaften ignorieren, ist es am besten, die Zeile display:inline -block am Ende zu schreiben, damit diese Zeile in Firefox funktioniert, wenn das zukünftige Firefox 3 erreicht wird. Der Code kann mit verschiedenen Versionen kompatibel sein gleichzeitig.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:150px;
}
</style>
</head>
<body>
fixed <span>width</span> span
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So verwenden Sie CSS zum Löschen von Floats
Das obige ist der detaillierte Inhalt vonSpannweiteneinstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1376
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
Wie verwenden Sie CSS, um Texteffekte wie Textschatten und Gradienten zu erstellen?
Mar 14, 2025 am 11:10 AM
In dem Artikel werden CSS für Texteffekte wie Schatten und Gradienten verwendet, diese für die Leistung optimiert und die Benutzererfahrung verbessert. Es listet auch Ressourcen für Anfänger auf (159 Zeichen)
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
