Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Inline-Inhalt

Im CSS wird Inhalt, der am Inline-Layout teilnimmt, als Inline-Inhalt bezeichnet. Die meisten Textsequenzen, ersetzte Elemente und generierte Inhalte sind standardmäßig Inline-Level.

Im Inline-Layout wird ein gemischter Strom von Text, ersetzten Elementen und anderen Inline-Boxen durch Fragmentierung in einen Stapel von Zeilenboxen angeordnet. Innerhalb jeder Zeilenbox sind Inline-Level-Boxen vertikal oder horizontal aneinander ausgerichtet, abhängig vom Schreibmodus. In der Regel sind sie an den Baselines ihres Textes ausgerichtet. Dies kann mit CSS geändert werden.

Inline-Layout

Hinweis: HTML (HyperText Markup Language) Elemente wurden historisch entweder als "Block-Level" oder "Inline" Elemente kategorisiert. Diese Präsentationseigenschaft wird jetzt von CSS spezifiziert.

Beispiele

html
<p>
  This span is an <span class="highlight">inline-level element</span>; its
  background has been colored to display both the beginning and end of the
  element's influence. Input elements, like <input type="radio" /> and
  <input type="checkbox" />, are also inline-level content.
</p>

In diesem Beispiel enthält das <p>-Element etwas Text. Innerhalb dieses Textes befindet sich ein <span>-Element und zwei <input>-Elemente, die Inline-Level-Elemente sind. Wenn sich das <span> über zwei Zeilen erstreckt, werden zwei Zeilenboxen erzeugt. Da diese Elemente inline sind, rendert der Absatz korrekt als ein einziger Absatz mit ununterbrochenem Textfluss:

Siehe auch