it-swarm.com.de

Breite der Inline-Elemente einstellen

Sie können die Breite von Inline-Elementen wie <span>, <em> und <strong> einstellen. Sie werden jedoch erst dann einen Effekt feststellen, wenn Sie sie positionieren.

a) Ich dachte, die Inline-Breite eines Inline-Elements kann nicht festgelegt werden?

b) Angenommen, die Breite kann eingestellt werden - wir werden keine Effekte (also die von uns angegebene Breite) wahrnehmen, bis wir das Inline-Element positionieren. Position wie/wo?

c) Warum ist die Breite der Inline-Elemente nur sichtbar, wenn wir sie "positionieren"? 

41
SourceC

Wie bereits erwähnt, wird der Browser durch Festlegen der Breite (oder einer anderen positionsbezogenen Eigenschaft) eines Inline-Elements daraufhin als Blockelement angezeigt. 

Sie können dieses Verhalten mithilfe der CSS-Eigenschaft display explizit deklarieren. Die häufigsten 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-Spezifikation die Verwendung von "Überschreiben der konventionellen Interpretation von HTML-Elementen" entmutigt:

Stylesheets bieten die Mittel für das Rendern beliebiger Elemente, einschließlich ob ein Element wird als Block oder Inline dargestellt. Im In einigen Fällen, z. B. ein Inline-Stil für Listenelemente kann dies __ sein. angemessen, aber im Allgemeinen Autoren werden von .__ abgeraten. das konventionelle überschreiben Interpretation von HTML-Elementen in diesen Weg.

10
Donut

Es gibt auch die Option anzeige: Inline-Block, was Ihnen das Beste aus beiden Welten geben könnte.

50
charliepark

a) Die Breite eines Inline-Elements wird ignoriert

b, c) Wenn Sie ein Inline-Element "positionieren" (das heißt mit position: absolute ), machen Sie es tatsächlich zu einem Blockelement, dessen Breite vom Browser interpretiert wird

17
Flavius Stef

Das bedeutet im Wesentlichen, dass, wenn Sie position: absolute auf ein Inline-Element anwenden, dieses zu einem Blockelement wird und Breite gewinnt.

7
n1313

Ich denke, es liegt an der Tatsache, dass, wenn Sie Positionsattribute für ein "Inline" -Element angeben, das Element nicht mehr angezeigt wird Inline und stattdessen als Blockelement behandelt wird.

2
tj111

ein. Breite der Inline-Elemente wird ignoriert.

b. Tatsächlich können Sie width auf ein Element anwenden, wenn display: inline-block; eingestellt ist. Um jedoch Ergebnisse anzuzeigen, sollten Sie auch overflow: hidden; anwenden.

Um alle Vorteile von Inline- und Blocktypen nutzen zu können, können Sie das folgende Snippet verwenden:

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

In diesem Fall können Sie die Breite und die Text-Ellipsis-Funktion verwalten.

0
Alx Lark

Das Inline-Element darf keine Breite haben. Width ist eine Eigenschaft eines Blockelements. So verwenden Sie die Eigenschaft width für ein Inline-Element oder ein Element mit Anzeige-Inline-Set-Anzeige als Inline-Block. Beispiel: display: Inline-Block;

0