display:inline-block

[Gunnar Bittersmann]

@@Linuchs

das erste div Element beendet bereits das p Element.

Danke, habe p durch div ersetzt. Dann ist die Beschreibung von inline missverständlich:

"inline Das Element wird als Inline-Element dargestellt."

Nein, was sollte daran missverständlich sein?

Dein Missverständnis besteht eher darin, was beatovich mit „das erste div Element beendet bereits das p Element“ sagen wollte.

Du hattest:

<p>Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl
<div style="display: inline-block">
  <input/>
  <div></div>
</div>
<button type=submit>go!</button>
</p>

Der HTML-Parser liest:

1. <p> → erzeuge ein p-Element,
2. Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl → schreibe das als Inhalt ins p-Element,
3. <div> → Moment mal! div darf in p nicht vorkommen. Mache also das p zu und erzeuge ein div außerhalb des p-Elements.

Sieht also so aus:

<p>Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl</p>
<div style="display: inline-block">
  <input/>
  <div></div>
</div>
<button type=submit>go!</button>
</p>

Das </p>-Tag am Ende gehört zu keinem Element.

Du kannst dem div nun style="display: inline-block" sagen wie du willst^[1]; da das p ein Blockelement ist, wird es den Inhalt des div (auch wenn dieser inline ist) nicht mit in seinen Block lassen, d.h. das div beginnt nach dem p in einer neuen Zeile.

LLAP 🖖

---

1. Dass du das nicht im style-Attribut, sondern im Stylesheet tun solltest, wurde schon oft genug gesagt. ↩︎