SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:CSS display inline-block.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Beispiele für das Verhalten von Elementen mit display: inline-block;</title>
<style>
p, #übersicht { width: 15em; }
span { padding: .5em; border: 2px solid green; }
#inline-block span { display: inline-block; }
#übersicht { margin: 0; padding: 0; text-align: center; }
#übersicht li { display: inline-block; width: 3em; margin: .2em;
padding: .2em; border: 2px solid green; vertical-align: top; }
</style>
</head>
<body>
<h1>Beispiele für das Verhalten von Elementen mit <code>display: inline-block;</code></h1>
<main>
<h2>Vergleich von Inline- und Inline-Block-Boxen</h2>
<p id="inline">In diesem, etwas längerem Text,
befindet sich ein <span>Inline-</span>Element.</p>
<p id="inline-block">In diesem, etwas längerem Text,
befindet sich ein <span>Inline-Block-</span>Element.</p>
<h2>Ausrichtung</h2>
<ul id="übersicht">
<li>Fünf<br>Fünf<br>Fünf<br>Fünf<br>Fünf
<li>Zwei<br>Zwei
<li>Vier<br>Vier<br>Vier<br>Vier
<li>Drei<br>Drei<br>Drei
<li>Eins
</ul>
</main>
</body>
</html>
