Si supponga di voler allineare le voci di una lista di definizione avendo il termine di definizione e la definizione sulla stessa riga. Per ottenere questo effetto con i CSS è necessario conoscere gli effetti del posizionamento relativo sugli elementi. Vediamo insieme i dettagli della soluzione trovata.
Abbiamo una semplice lista di definizioni:
<dl>
<dt>Termine</dt>
<dd>Definizione</dd>
<dt>Termine</dt>
<dd>Definizione</dd>
<dt>Termine</dt>
<dd>Definizione</dd>
<dt>Termine</dt>
<dd>Definizione</dd>
</dl>
Il posizionamento relativo, a differenza di quello assoluto, viene calcolato rispetto alla posizione corrente dell'elemento. Applicando tale posizionamento, l'elemento viene rimosso dal flusso ma conserva la sua posizione originaria. Possiamo applicare questo modello al termine di definizione, facendo così in modo che venga rimosso dal flusso ma mantenga la sua posizione:
dl {
margin: 0 auto;
padding: 2em 0;
font: 100% Arial, sans-serif;
width: 30em;
}
dt {
position: relative;
top: 1.5em;
width: 7em;
font-weight: bold;
padding: 0.5em;
background: #ffc;
border-radius: 8px;
border: 1px solid #999;
text-align: center;
}
dd {
margin: 0 0 0 9em;
padding: 0 0 0 0.5em;
border-left: 1px solid #999;
}
La definizione avrà un margine sinistro superiore alla larghezza del termine di definizione, in modo da creare l'allineamento voluto. Si noti come il termine di definizione debba avere una larghezza esplicita.
Potete visionare l'esempio finale in questa pagina.