suchen

Heim >Web-Frontend >CSS-Tutorial >Spannweiteneinstellung

Spannweiteneinstellung

不言
不言Original
2018-06-12 11:43:301986Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So löschen Sie Floats mit CSSNächster Artikel：So löschen Sie Floats mit CSS

In Verbindung stehende Artikel

Mehr sehen