2.6.7 Zwei Elemente in einer Zeile <display:inline>

a) Zwei Abschnitte in der gleichen Zeile

<p style=display:inline;>
A display property with a value of "inline" 
results in </p>
<p style=display:inline;>no distance 
between two elements. </p>

A display property with a value of "inline" results in

no distance between two elements.

• W3Schools: Beispiel: How to display an element

b) Horizontale Menüs formatiert mit HTML-Codes

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>

• Link one
• Link two
• Link three
• Link four

• W3Schools: Beispiel: Creating a horizontal menu

c) Horizontale Menüs formatiert mit CSS

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):

• Link 1
• Link 2
• Link 3
• Link 4

• style-sheets: Strukturierte Navigation

d) Horizontale Formatierung

• SELFHTML: Horizontale Formatierung

Beispiel 1: Liste mit display inline und text-align:center

• SELFHTML: Beispiel 1: Horizontale Navigationsleiste zentriert

Beispiel 2: Liste mit 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.

• SELFHTML: Beispie 2: Horizontale Navigationsleiste mit gleichen Breiten

↑