Beispiel:CSS Anwendung dl.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
	<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>dt und dd in einer Zeile</title>
		<style>
			dt {
				float: left;
				font-weight: bold;
				margin-right: 0.5em;
			}
			dt:after {
				content: ": ";
			}
			dd:after {
				content: " ";
				clear: left;
				display: block;
			}
		</style>
	</head>
	<body>
		<h1>Anwendung einer Definitionsliste (<code>dl</code>)</h1>
		<main>
			<h2>
				<code>dt</code> und <code>dd</code>
				in einer Zeile darstellen
			</h2>
			<dl>
				<dt>Punkt 1</dt><dd></dd>
				<dt>Punkt 2</dt><dd>wird hier definiert</dd>
				<dt>Punkt 3</dt><dd>gibt es in einer folgenden Zeile</dd><dd>Folgeerläuterung 1</dd><dd>Folgeerläuterung 2</dd><dd>...</dd>
				<dt>Punkt 4</dt><dd>ohne Erläuterung</dd>
			</dl>
		</main>
	</body>
</html>