CSS: allineamento orizzontale degli elementi nelle liste di definizione

Per impostazione predefinita gli elementi di una lista di definizione vengono visualizzati come elementi di blocco in cui la definizione ha un margine sinistro di circa 2.5em / 40px. Tuttavia allineare tali voci in orizzontale con i CSS è alquanto semplice.

Partiamo da questa struttura HTML:

<dl class="list clearfix">
	<dt>Term</dt>
	<dd>Definition</dd>
	<dt>Term</dt>
	<dd>Definition</dd>
	<dt>Term</dt>
	<dd>Definition</dd>
</dl>

Useremo il floating per allineare gli elementi ma con un accorgimento particolare: dato che non esiste un elemento che funga da riga, l'elemento flottato dovrà avere anche il clearing in modo da evitare sovrapposizioni:

.list {
	margin: 0;
}

.clearfix:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	overflow: hidden;
	height: 0;
}

.list dt {
	font-weight: bold;
	float: left;
	clear: left;
	width: 15%;
	margin-bottom: 1em;
}

.list dd {
	margin-left: 17%;
	margin-bottom: 1em;
}

Assegnare una larghezza all'elemento flottato non è necessario, ma spesso ci risparmia la fatica di dover impostare la spaziatura orizzontale tra gli elementi.