@@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: ~~~html, bad <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>`{: .language-html} → erzeuge ein `p`-Element, 2. `Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl`{: .language-html} → schreibe das als Inhalt ins `p`-Element, 3. `<div>`{: .language-html} → **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: ~~~html <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>`{: .language-html}-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. [^1]: Dass du das nicht im `style`-Attribut, sondern im Stylesheet tun solltest, wurde schon oft genug gesagt. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@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: ~~~html, bad <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>`{: .language-html} → erzeuge ein `p`-Element, 2. `Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl`{: .language-html} → schreibe das als Inhalt ins `p`-Element, 3. `<div>`{: .language-html} → **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: ~~~html <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>`{: .language-html}-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. [^1]: Dass du das nicht in `style`-Attributen, sondern im Stylesheet tun solltest, wurde schon oft genug gesagt. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@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: ~~~html, bad <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>`{: .language-html} → erzeuge ein `p`-Element, 2. `Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl`{: .language-html} → schreibe das als Inhalt ins `p`-Element, 3. `<div>`{: .language-html} → **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: ~~~html <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>`{: .language-html}-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 danach in einer neuen Zeile. [^1]: Dass du das nicht in `style`-Attributen, sondern im Stylesheet tun solltest, wurde schon oft genug gesagt. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)