Einstellen der Breite der Inline-Elemente

Question

Sie die Breite der Inline-Elemente festlegen können wie <span>, <em> und <strong>, aber Sie werden keine Auswirkungen bemerken, bis Sie sie positionieren.

a) Ich dachte, die Breite von Inline-Inline-Element kann nicht eingestellt werden?

b) Angenommen, die Breite kann eingestellt werden - wir werden keine Effekte bemerken (also die Breite, die wir angeben), bis wir das Inline-Element positionieren. Positionieren wie/wo?

c) Warum ist die Breite von Inline-Elementen nur dann sichtbar, wenn wir sie "positionieren"?

Answer 1

Wie andere bereits erwähnt haben, wird beim Festlegen der Breite (oder einer anderen positionsbezogenen Eigenschaft) eines Inline-Elements der Browser das Element dann als Blockelement anzeigen.

Sie können diese Art von Verhalten explizit mit der Eigenschaft CSS display deklarieren. Die gebräuchlichsten Einstellungen sind display: inline (Standard), display: block und display: none.
Eine vollständige Referenz für die display-Eigenschaft ist verfügbar here.

Es sollte jedoch beachtet werden, dass die HTML 4.01 specification die Verwendung von „Überschreiben der konventionellen Interpretation von HTML-Elementen“ schreckt:

Style Sheets bieten die Mittel, um geben Sie die Wiedergabe von beliebigen Elemente, einschließlich, ob Ein Element wird als Block oder Inline gerendert. In einigen Fällen, wie beispielsweise ein Inline-Stil für Listenelemente, diese geeignet sein können, aber im Allgemeinen sind Autoren aus Überschreiben der herkömmlichen Interpretation von HTML-Elementen in diese Weise entmutigt.

Answer 2

a) Die Breite eines Inline-Element ignoriert

b, c) Wenn "Position" ein Inline-Element (Ich gehe davon aus, dass Mittel Position unter Verwendung von: absoluten), Sie machen es tatsächlich einen Block Element, dessen Breite vom Browser interpretiert wird.

Answer 3

Ich denke, es ist aufgrund der Tatsache, dass wenn Sie Positionsattribute für ein "Inline" -Element angeben, das Element Inline nicht mehr angezeigt wird und stattdessen wie behandelt wird Block-Level-Element.

Answer 4

Das bedeutet im Grunde, dass wenn Sie position: absolute auf Inline-Element anwenden, wird es Block-Element und Gain-Breite werden.

Answer 5

Es gibt auch die Möglichkeit, display: inline-block, die Ihnen das Beste aus beiden Welten geben könnten. Seien Sie jedoch vorsichtig bei der browserübergreifenden Kompatibilität.

Answer 6

a. Die Breite von Inline-Elementen wird ignoriert.

b.Eigentlich können Sie Breite auf Element anwenden, wenn display: inline-block; gesetzt ist, aber um Ergebnisse zu sehen, sollten Sie auch anwenden overflow: hidden;.

Um alle Vorteile von Inline- und Blocktypen haben Sie folgen Schnipsel verwenden können:

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

In diesem Fall können Sie Breite verwalten und Text Auslassungs Funktion.

Answer 7

Inline-Element kann keine Breite haben. Breite ist eine Eigenschaft des Blockelements. Um die Eigenschaft der Breite über ein Inline-Element oder ein Element mit Inline-Typ zu verwenden, setzen Sie die Anzeige als Inline-Block, zB: display: inline-block;