Wann verwenden Sie Inline-Block?

display: inline-block ist ein klassischer CSS-Attributwert! Es ist keine neue Funktion, und es besteht keine Notwendigkeit, sich um die Browserkompatibilität zu kümmern. Viele Entwickler nutzen es intuitiv. Aber schauen wir uns genauer an. Unter welchen Umständen funktioniert es? Wann wählen Sie es im Vergleich zu anderen ähnlichen Optionen aus?

Taste

Die häufigste Antwort, die ich höre, ist: Ich benutze sie immer für Tasten .

Letztendlich denke ich, dass es Sinn macht, aber es führt zu einem leichten Missverständnis, den ich denke. Die Idee ist, dass das Element, das wie eine Taste aussehen möchte (kann verwendet werden<a></a> Anwesend<button></button> oder andere erstellte Elemente) können inline wie die Natur angeordnet werden, aber Rand und Polsterung haben. Dies ist der Teil des Missverständnisses: display: inline; Elemente können immer noch Rand und Polsterung haben, und ihr Verhalten kann mit dem übereinstimmen, was Sie erwarten.

Das Schwierige ist:

• Der Blockrichtungsrand des Inline -Elements wird vollständig ignoriert
• Die Polsterung von Inline -Elementen hat keinen Einfluss auf die Höhe der Textzeile

Während der Stil der Schaltfläche selbst ziemlich gut eingestellt ist, ist dies möglicherweise nicht der Fall mit dem übergeordneten Element und dem umgebenden Text. Hier ist eine Demonstration:

Die Dinge werden schlimmer, wenn die Inline -Taste mit dem Wickeln beginnt:

Ich denke also, dass die Verwendung inline-block auf der Schaltfläche sehr vernünftig ist. Aber……

Vergessen Sie nicht inline-flex und inline-grid

Mit display: inline-flex und inline-grid erhalten Sie das gleiche gute Verhalten wie inline-block , aber Elemente (normalerweise Schaltflächen) können von einem leistungsstärkeren Inline-Layout-System profitieren.

Nehmen Sie als Beispiel eine Taste mit einem Symbol, wie unten gezeigt:

 <a data-line="" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" html="">.Button Svg {
  vertikaler Align: Mitte;
}</a>

Dies kann niemals ganz richtig sein ...

Die Verwendung von inline-flex kann dieses Problem jedoch leicht lösen:

 .Taste {
  Anzeige: Inline-Flex;
  Ausrichtung: Zentrum;
}

Mit inline-flex oder inline-grid können Sie alle Funktionen eines Flexbox- oder Raster-Layout-Systems in Blöcken in einem Inline-Orientierungslayout haben.

Blöcke, die noch gebrochen werden können

Das Inline -Blockelement respektiert die Breite. Dies ist ein weiterer Unterschied zwischen ihnen und rein Inline -Elementen. Menschen, die ein Spaltenlayoutsystem mit Inline -Blöcken erstellen, weil es im Grunde das tut, was der Float darauf verzichten kann, ohne sich über das Löschen des Float² zu sorgen, sodass die Menschen eine elegantere Linienbrechmethode nutzen können als der Float.

Die Idee, dass Inline-Blockelemente als Spalten dargestellt werden, die gebrochen werden können (sogar auf 1 Spalte verengt), besteht bis heute, da es sich um einen Trick handelt, der in HTML-E-Mails verwendet werden kann, damit Multi-Säulen-Layouts in kleinen Spalten auf kleinen Bildschirmen einstürzen können , ohne dass Medienfragen erforderlich sind (einige E-Mail-Clients unterstützt Medienfragen nicht).

Dans Beispiel.

Konvertierung auf Inline -Elemente

Inline -Elemente können nicht konvertiert werden. Wenn Sie also eine Konvertierung benötigen, müssen Sie inline-block verwenden.

Subelemente, die nicht in der Mitte von sich selbst gebrochen sind

Sie können CSS -Spalten im Absatztext verwenden, und es muss sich nicht darum kümmern, ob ein bestimmter Absatz über Spalten getrennt ist. Aber manchmal werden CSS -Säulen für Blöcke verwendet, die umständlich sind. Angenommen, diese Blöcke haben ihren eigenen Hintergrund und ihre eigene Polsterung. Das Trennen ist visuell sehr seltsam.

Dies ist ein seltsamer Trick, den ich nicht sagen kann, dass ich 100% verstehe, aber wenn Sie display: inline-block; In diesen Kästchen (und wahrscheinlich width: 100%; um sicherzustellen, dass sie die Säulenbreite behalten), dann werden sie nicht brechen und die Polsterung bleibt erhalten.

So ordnen Sie schnell Listen horizontal an

Dies ist eine weitere sehr beliebte Antwort auf meinen ursprünglichen Tweet. Listen Sie Elemente Stack List-Elemente vertikal, genau wie Elemente auf Blockebene. Sie sind eigentlich keine Blöcke. Sie werden display: list-item; , was hier tatsächlich wichtig ist, wie wir sehen werden. Ein beliebter Anwendungsfall lautet: "Wenn ich eine Liste horizontal arrangieren möchte" .

Sie haben also eine Liste ...

• Drei
• Klein
• Schwein

Sie möchten es in eine Zeile ändern, Sie können ...

 li {
  Anzeige: Inline-Block;
}

geschafft.

Ich habe es schnell in Voice -Over ausprobiert, und die Inline -Blockliste erklärt immer noch Elemente als Listen, aber es sind keine Kugeln vorgelesen, was Sinn macht, weil sie nicht existieren. Dies ist das Problem, die Art und Weise zu ändern, wie die Listenelemente selbst in Nicht- list-item angezeigt werden: Sie verlieren ihre Merkmale von Listen-Elementen.

Eine andere Möglichkeit besteht darin, das übergeordnete Element als Flexbox -Container zu setzen ...

 ul {
  Anzeige: Flex;
}

... Dies implementiert horizontale Linien (Flexbox Standard), behält jedoch Kugeln bei, da Sie nicht ändern, wie die Listenelemente selbst angezeigt werden. Wenn Sie es manuell löschen möchten, liegt es an Ihnen.

Zentrierte Liste

Jeff Starr hat gerade einen Blog über Listen im zentrierten Text geschrieben, der ebenfalls unangenehm werden kann. Die Verlegenheit ist, dass der Text im Listenelement zentriert werden kann, aber das Listenelement selbst ist immer noch in voller Breite, sodass eine Situation erstellt, in der die Kugel nach links ausgerichtet bleibt.

Jeffs Lösung besteht darin, die gesamte Liste als Inline -Block festzulegen. Dies macht die Listenbreite so breit wie die natürliche Breite ihres Inhalts, sodass die Kugel die linke Kante verlassen und sich mit dem zentrierten Inhalt bewegen kann. Solange es vor und hinten Elemente auf Blockebene gibt, ist dies eine gute Lösung.

Alternativ, wenn das Ziel darin besteht, die Breite der Liste auf die Breite des Inhalts zu reduzieren, können Sie dies auch erreichen, ohne zu verhindern, dass die Liste ein Element auf Blockebene wird:

 ul {
  Breite: Max-Inhalt;
  Rand: 0 Auto;
  Text-Align: links;
}

1. Es gibt ein weiteres kniffliges Problem mit Inline -Blöcken. Wie Inline -Elemente wird jeder Raum zwischen ihnen tatsächlich als Raum rendern. Wenn also zwischen ihnen Räume liegen, werden zwei 50% breite inline-block Elemente nicht in einer Zeile angezeigt. Die gute Nachricht ist, dass es Tricks gibt, dieses Problem zu lösen.
2. Ich sage "In der Vergangenheit", weil Sie, wenn Sie heute ein Spaltensystem erstellen würden, mit ziemlicher Sicherheit Flexbox oder Grid verwenden oder überhaupt nicht "System" erstellen würden, da die Verwendung dieser Syntax die Notwendigkeit des Systems weitgehend negiert.

Das obige ist der detaillierte Inhalt vonWann verwenden Sie Inline-Block?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!