<!doctype html>
<html>
<head>
<title>Styling DL lists</title>
<style>
dl {
overflow: hidden;
/* these rules don't affect the positioning */
background: #ccc;
margin: 0;
padding: 0.5em;
max-width: 30em;
}
dt, dd {
margin-top: 0.5em;
}
dt {
clear: both;
float: left;
width: 6em;
/* these rules don't affect the positioning */
font-style: italic;
text-align: right;
}
dd {
margin-left: 6.5em;
}
h1 {
display: none;
}
</style>
</head>
<body>
<h1>Styling DL lists</h1>
<dl>
<dt>Term A</dt>
<dd>Definition A</dd>
<dt>Term B</dt>
<dd>A very long definition of B that may span over multiple lines of text. This should not break the flow with the rest of the items in the list.</dd>
<dt>Term C</dt>
<dd>Definition C1</dd>
<dd>Definition C2</dd>
<dd>Definition C3</dd>
<dt>Long term D that spans multiple lines</dt>
<dd>Definition D</dd>
<dt>Term E1</dt>
<dt>Term E2</dt>
<dd>Definition E</dd>
<dt>Long term F with multiple definitions</dt>
<dd>Definition F1</dd>
<dd>Definition F2</dd>
<dt>Undefined term G</dt>
<dd></dd>
<dt>Term H</dt>
<dd>Definition H</dd>
</dl>
</body>
</html>