<display:inline>
1) Angabe im Quelltext
<p style="display:inline"> A display property with a value of "inline" </p> <p style="display:inline"> results in no distance between two elements. </p>
2) Ausgabe im HTML-Dokument
A display property with a value of "inline"
results in no distance between two elements.
Die einzelnen Listen-Punkte werden mit style="display:inline"
nebeneinander gesetzt
<ul> <li style="display:inline;color:white; background-color:purple; padding:0.2em 0.6em;">Link one </li> <li style="display:inline;color:white; background-color:purple; padding:0.2em 0.6em;">Link two </li> <li style="display:inline;color:white; background-color:purple; padding:0.2em 0.6em;">Link three </li> <li style="display:inline;color:white; background-color:purple; padding:0.2em 0.6em;">Link four </li> </ul>
Die einzelnen Listen-Punkte werden mit id="posinline"
nebeneinander gesetzt
1) Im Kopf dieser Datei befindet sich folgerder CSS-Eintrag:
<style type="text/css"> /* Fuer Anleitung "position:inline" */ ul#posinline li { /*Selektor für einen Listenpunkt in unserer Navigationsliste*/ display: inline; /*Listenpunkt als normalen Inhalt darstellen lassen*/ margin: 0 5px; /*Ein wenig horizontaler Abstand*/ padding: 2px; /*Platz um die Links*/ background: #FFB6C1;/*Eine Hintergrundfarbe*/ } </style>
2) Im Quelltext steht geschrieben:
<ul id="posinline"> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul>
3) Im Dokument erscheint folgendes (Menü ohne Links):
display inline
und text-align:center
display inline
und float
display inline
und text-align:center
display inline
und float
Auch in diesem Beispiel wird display:inline für die li-Elemente benötigt, um Zeilenumbrüche zu verhindern.
Da die enthaltenen Menüpunkte über float Eigenschaften von Block-Elementen erhalten, können ihnen auch eine Breite (width) und Außenabstände (margin) zugewiesen werden.