2.8.7 Zwei Elemente in einer Zeile <display:inline>
en <display:inline>
fr <display:inline>

• 1 Zwei Abschnitte in der gleichen Zeile
• 2 Horizontale Menüs formatiert mit HTML-Codes
• 3 Horizontale Menüs formatiert mit CSS
• 4 Horizontale Formatierung
  • a) Allgemein
  • b) Beispiel 1: Liste mit display inline und text-align:center
  • c) Beispiel 2: Liste mit display inline und float

-

⇧ 1 Zwei Abschnitte in der gleichen Zeile

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.

• W3Schools en Beispiel: How to display an element

-

⇧ 2 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 en Beispiel: Creating a horizontal menu

-

⇧ 3 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 de Strukturierte Navigation

-

⇧ 4 Horizontale Formatierung

• a) Allgemein
• b) Beispiel 1: Liste mit display inline und text-align:center
• c) Beispiel 2: Liste mit display inline und float

-

↑ a) Allgemein

• SELFHTML de Horizontale Formatierung

-

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

• SELFHTML de 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 de Beispiel 2: Horizontale Navigationsleiste mit gleichen Breiten

↑