Lösung des Problems, dass das width-Attribut von HTML-Elementen keine Auswirkung hat

1. Das width-Attribut des Elements hat keine Auswirkung Lassen Sie uns zuerst das Programm ausführen und sehen: [html] 123 Sie können sehen, dass die Spanne automatisch die Breite entsprechend dem darin enthaltenen Inhalt ändert. Dies liegt daran: für Inline-Elemente (es kann standardmäßig inline sein, wie z. B. span-Elemente, oder es kann sein 1. Bezüglich der Tatsache, dass das Breitenattribut des Elements keine Auswirkung hat
Führen Sie zuerst das Programm aus, um Folgendes zu sehen:

Tipps: Sie können zuerst einen Teil des Codes ändern und dann ausführen

Sie können sehen, dass die Spanne die Breite automatisch entsprechend dem darin enthaltenen Inhalt ändert
Dies liegt daran: Für Inline-Elemente ( (es kann standardmäßig inline sein) Span-Elemente können beispielsweise auch display sein: Inline-Elemente)
width und height lösen hasLayout nur unter IE5.x und IE6 oder späteren Versionen des Quirks-Modus aus. Wenn der Browser für IE6 im Standardkompatibilitätsmodus ausgeführt wird, ignorieren Inline-Elemente die Breiten- oder Höhenattribute, daher kann das Festlegen von Breite oder Höhe in diesem Fall nicht anordnen, dass das Element ein Layout hat.
Wenn ein Element mit „Layout“ auch Folgendes anzeigt: inline, ist sein Verhalten dem im Standard erwähnten Inline-Block sehr ähnlich: Er wird wie gewöhnlicher Text horizontal und fortlaufend im Absatz angeordnet, unterliegt vertikal- align wirkt sich aus und die Größe kann adaptiv an den Inhalt angepasst werden. Dies kann auch erklären, warum Inline-Elemente in IE/Win allein mit weniger Problemen Elemente auf Blockebene enthalten können, da display: inline in anderen Browsern Inline bedeutet, im Gegensatz zu IE/Win, sobald das Inline-Element ein Layout hat, hat es es immer noch ein Layout. Wird zum Inline-Block.
Lösung:
<1>Entfernen Sie die W3C-Standarddeklaration von der ASP.NET-Seite (nicht empfohlen):
123

<2> das Gleiche wie S. Wenn display:inline-block festgelegt ist, werden die Spans in derselben Zeile aufgelistet und das width-Attribut wird wirksam.

Allgemeine Wertbeschreibungen für Elementanzeigeattribute:

Block: Standardwert des Blockobjekts. Erzwingt die Darstellung des Objekts als Blockobjekt und fügt nach dem Objekt eine neue Zeile hinzu. inline: Standardwert für Inline-Objekte. Erzwingt die Darstellung des Objekts als Inline-Objekt und entfernt Zeilen aus dem Objekt. (Inline) „The Definitive Guide to CSS“ Chinesische Textanzeige: Jedes sichtbare Element, das kein Element auf Blockebene ist, ist ein Inline-Element. Das Merkmal seiner Leistung ist die Form des „Zeilenlayouts“. Das „Zeilenlayout“ bedeutet hier, dass seine Ausdrucksform immer in Zeilen angezeigt wird. Wenn wir beispielsweise ein Inline-Element border-bottom:1px solid #000; festlegen, wird es in jeder Zeile wiederholt und unter jeder Zeile befindet sich eine dünne schwarze Linie. Wenn es sich um ein Element auf Blockebene handelt, erscheint die angezeigte schwarze Linie nur unterhalb des Blocks. inline-block: Rendert das Objekt als Inline-Objekt, rendert jedoch den Inhalt des Objekts als Blockobjekt. Benachbarte Inline-Objekte werden in derselben Zeile gerendert.
nicht: verstecktes Objekt. Im Gegensatz zum versteckten Wert des Attributs
Sichtbarkeit
reserviert es seinen physischen Platz nicht für das versteckte Objekt.
Breite und Höhe können für Inline-Elemente (display:inline;) nicht festgelegt werden, da Inline zum Zeilenlayout gehört und seine Eigenschaft darin besteht, in einer Zeile angeordnet zu werden. Daher können Breite und Höhe nicht festgelegt werden. 123

<3>Wenn float ist set :left |. right, width-Attribute werden wirksam
(Floating) Dadurch wird das angegebene Element vom normalen Dokumentfluss getrennt und erzeugt außergewöhnliche Layouteigenschaften. Und FLOAT muss auf Elemente auf Blockebene angewendet werden, was bedeutet, dass Floating nicht für Inline-Tags gilt. Mit anderen Worten: Wenn FLOAT angewendet wird, wird dieses Element als Element auf Blockebene bezeichnet.
123

2.CSS-Anzeige: Der Unterschied zwischen Inline-Attribut und Float

Anzeige: inline; Die Funktion des Attributs besteht darin, Elemente auf Blockebene in Inline-Elemente umzuwandeln, z. B. p. Nach dem Festlegen des Inline-Attributs wird es keine separate Zeile mehr belegen. Der gleiche Effekt kann jedoch mit der Float-Eigenschaftsseite erzielt werden. (Informationen zu Inline-Elementen und Elementen auf Blockebene finden Sie unter Inline-Elemente und Elemente auf Blockebene.) Wenn ein Element auf das Inline-Attribut festgelegt ist und zu einem Inline-Element wird, hat das Festlegen des Breitenattributs keine Auswirkung. Nachdem wir die Anzeige: Auswirkungen von Inline auf Elemente auf Blockebene gelesen haben, werfen wir einen Blick auf die Auswirkungen von Float auf Inline-Elemente.
Das heißt, wenn ein Inline-Element das Float-Attribut festlegt, denkt es tatsächlich, dass es sich um einen Block handelt -level-Element können Sie das Breitenattribut
festlegen

Das obige ist der detaillierte Inhalt vonLösung des Problems, dass das width-Attribut von HTML-Elementen keine Auswirkung hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!