Beispiel:CSS2 list-style-position.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" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>list-style-position</title>
<style>
ul { max-width: 15em; border: 1px solid blue;}
li { background-color: lightblue; margin: 2px; }
.outside {list-style-position: outside;}
.inside {list-style-position: inside;}
</style>
</head>
<body>
<h1>Verwendung von <code>list-style-position</code></h1>
<h2>einzeilige Listenelemente</h2>
<p>Bei einzeiligen Listenelementen ist der Unterschied nur dann wirklich wahrnehmbar, wenn die betreffenden Listen unmittelbar untereinander stehen.</p>
<p>Zur Veranschaulichung sind die Listenelemente und die Liste selbst farblich hervorgehoben.</p>
<ul class="outside">
<li>Berlin</li>
<li>London</li>
<li>Paris</li>
</ul>
<ul class="inside">
<li>Berlin</li>
<li>London</li>
<li>Paris</li>
</ul>
<h2>mehrzeilige Listenelemente</h2>
<p>Interessant ist diese Eigenschaft erst, wenn die Texte der Aufzählungselemente länger werden, weil es dann tatsächlich unterschiedliche Darstellungsformen gibt.</p>
<ul class="outside">
<li>Angela Merkel, seit 2005 Bundeskanzlerin</li>
<li>Frank-Walter Steinmeier, 2005-2009 und 2013-2017 Bundesminister des Auswärtigen</li>
<li>Manuela Schwesig, 2013-2017 Bundesministerin für Familie, Senioren, Frauen und Jugend</li>
</ul>
<ul class="inside">
<li>Angela Merkel, seit 2005 Bundeskanzlerin</li>
<li>Frank-Walter Steinmeier, 2005-2009 und 2013-2017 Bundesminister des Auswärtigen</li>
<li>Manuela Schwesig, 2013-2017 Bundesministerin für Familie, Senioren, Frauen und Jugend</li>
</ul>
</body>
</html>
