display:inline-block

[Linuchs]

Moin,

ich möchte ein input-Feld im Textfluss haben. Weil bei der Eingabe Vorschlagswerte aufpoppen, brauche ich ein umgebendes div. Das soll inline-block sein, ist es aber nicht. Warum?

<p>Rechte Spalte: Kilometer Luftlinie zu deiner Postleitzahl
<div style="display:inline-block; position:relative; border:1px solid #f00">
<input
id        = "such_plz"
type      = "text"
name      = "such_plz"
maxlength = "10"
size      = "10"
value     = ""
title     = "such_plz (10)"
onkeyup   = "holeVorschlaege('remso.eu',this.id,this.value)"
onblur    = "loescheVorschlaege(this.id)"
placeholder = "PLZ"
autocomplete  = "off"

>

<div id='such_plz_vorschlaege' class="vorschlaege"></div>
</div>
<button type=submit>go!</button>
</p>

Linuchs

[beatovich]

hallo

Du hast Syntaxfehler im Code. das erste div Element beendet bereits das p Element. Ich empfehle im übrigen Labels für Formularelemente.

[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."

Linuchs

[beatovich]

hallo

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."

Du hast ein äusseres display-inline div, dessen intrinische Breite sich nach dem inneren div Blockelement richtet. Du hast ja keine explizite Breite angegeben.

[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. ↩︎

[Rolf b]

Finde ich eigentlich blöd umgesetzt, ich würde es fast einen Krabbelkäfer nennen wollen. Die Merkregel ist doch, dass ein Blockelement nicht in ein <p> Element hineingehört, und durch display:inline-block wird dem div nach außen hin seine Block-Eigenschaft genommen. Der Browser müsste hier den zugewiesenen display-Style beachten, bevor er die Notbremse zieht.

Dass inline-block im <p> grundsätzlich geht, zeigt sich, wenn man es so macht:

<p id="hugo">
Paragraph 1: <span>
Hui!
</span>
</p>

#hugo span {
  display: inline-block;
  width: 100px;
  border: 1px solid green;
}

Wie verwerflich ist diese Alternative?

Rolf

[Camping_RIDER]

Aloha ;)

Finde ich eigentlich blöd umgesetzt, ich würde es fast einen Krabbelkäfer nennen wollen. Die Merkregel ist doch, dass ein Blockelement nicht in ein <p> Element hineingehört, und durch display:inline-block wird dem div nach außen hin seine Block-Eigenschaft genommen.

Nein, Denkfehler. display:inline-block nimmt einem Block-Element nicht die Block-Eigenschaft, auch nicht „nach außen“!

Wie alle CSS-Regeln beeinflusst display:inline-block nicht die Eigenschaften des HTML-Elements / Markups (wäre im Sinne von Separation of concerns auch nicht so cool), sondern beeinflusst alleine die Darstellung des Elements.

Ein Block-Element, das (wegen mir sogar) inline dargestellt wird, ist immer noch ein Blockelement und kein inline-Element. Wenn man einen Elefanten in ein entsprechendes Kostüm steckt sieht er vielleicht aus wie eine zu groß geratene Mücke, er ist aber dann trotzdem kein Insekt.

Der Browser müsste hier den zugewiesenen display-Style beachten, bevor er die Notbremse zieht.

Nein, der Browser macht das richtig. Separation of concerns ist absolut sinnvoll, und das bedingt, dass der Browser eben bei der Interpretation des HTML (und nur hier scheitert die Sache im vorliegenden Fall) CSS nicht hinzuzieht und auch nicht hinzuziehen darf. Für das Markup ist alleine HTML maßgeblich.

Dass inline-block im <p> grundsätzlich geht, zeigt sich, wenn man es so macht:

<p id="hugo">
Paragraph 1: <span>
Hui!
</span>
</p>

#hugo span {
  display: inline-block;
  width: 100px;
  border: 1px solid green;
}

Exakt.

Wie verwerflich ist diese Alternative?

Gar nicht, imho. So sollte das gemacht werden.

Grüße,

RIDER

[Matthias Apsel]

Hallo Rolf b,

Finde ich eigentlich blöd umgesetzt, ich würde es fast einen Krabbelkäfer nennen wollen. Die Merkregel ist doch, dass ein Blockelement nicht in ein <p> Element hineingehört, und durch display:inline-block wird dem div nach außen hin seine Block-Eigenschaft genommen. Der Browser müsste hier den zugewiesenen display-Style beachten, bevor er die Notbremse zieht.

Nein, eine Seite muss auch ohne CSS funktionieren. Und es ist ja nicht die Darstellung, die die Probleme macht, sondern die Semantik. Ein Absatz darf phrasing-content enthalten, also Fließtextauszeichnung.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Rolf b

Finde ich eigentlich blöd umgesetzt, ich würde es fast einen Krabbelkäfer nennen wollen. Die Merkregel ist doch, dass ein Blockelement nicht in ein <p> Element hineingehört, und durch display:inline-block wird dem div nach außen hin seine Block-Eigenschaft genommen.

Nein, das DOM wird aus dem HTML generiert – ohne irgendwelches CSS zu beachten.

Der Browser müsste hier den zugewiesenen display-Style beachten, bevor er die Notbremse zieht.

Nein, die Abhängigkeit von CSS sollte da keinesfalls mit rein. Das würde auch des Rendern der Seite enorm verzögern, da die Generierung des DOM geblockt wäre bis alle externen Stylesheets geladen wären. Und was sollte passieren, wenn aus irgendeinem Grund (Verlust der Netzwerkverbindung) die Stylesheets nicht (fertig) geladen werden?

LLAP 🖖