Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 8. 7 Zwei Elemente in einer Zeile <display:inline>

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

-

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.

-

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>

-

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

-

4 Horizontale Formatierung

-

a) Allgemein

-

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

-

Beispiel 2: Liste mit display inline und float