CSS: lista di definizione tabellare

Una lista di definizione può essere visualizzata in modo del tutto simile a quello di una tabella grazie ad una semplice tecnica CSS che combina il floating con il clearing. Le specifiche affermano che un float non può comparire a lato di un elemento a cui è stato applicato il clearing. Per questo motivo, il float verrà sempre spinto su una nuova riga. Vediamo come applicare questa tecnica alle liste di definizione.

Abbiamo la seguente struttura HTML:

<dl>
	<dt><a href="#">Link</a></dt>
	<dd><strong>Descrizione</strong>
	<ul>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
    </ul>
	</dd>
	<dt><a href="#" class="top">Link</a></dt>
	<dd><strong>Descrizione</strong>
	<ul>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
    </ul>
	</dd>
	<dt><a href="#" class="top">Link</a></dt>
	<dd><strong>Descrizione</strong>
	<ul>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
    </ul>
	</dd>

</dl>

Applichiamo la tecnica descritta in precedenza per allineare sulla stessa riga gli elementi dt e dd:

dl {
	border-width: 1px; 
	border-style: solid;
}

dt {  
	float: left;
	clear: left;
	margin: 0;
	padding: 0;
	width: 17em;
}

dt a {
	display: block;
	border-bottom: 1px solid #000;
	padding: 1em;
	height: 100%;
	background: #ffffe0;
}

dt a.top {
	border-top: 1px solid #000;
}

dd {
	margin: 0 0 0 17em;
	padding: 1em;
	border-left: 1px solid #000;
	background: #f1f1f1;
	color: #000;
}

L'elemento dt è stato flottato a sinistra ma ha la proprietà clear impostata, quindi nessun altro float può allinearsi sulla stessa riga. L'elemento dd ha un margine sinistro pari alla larghezza dell'elemento flottato in modo da allinearlo alla destra del float. Con questa combinazione gli elementi della lista appaiono sulla stessa riga a due a due.

Potete visionare l'esempio finale in questa pagina.