CSS: allineamento orizzontale degli elementi nelle liste di definizione

  • CSS
  • Gabriele Romanato

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.

Torna su