Tutorial HTML CSS: Disporre gli elementi in orizzontale Con il Selettore first-child

• Tweet

• Tweet

Non sempre quando dobbiamo disporre degli elementi in orizzontale troviamo la via più semplice.Oggi vediamo un tutorial dove vedremo un buon metodo per disporre dei div in orizzontale, in modo da ottenere questo risultato:

Innanzitutto dobbiamo scrivere il codice HTML, per il div wrapper e poi al suo interno i  div che dovremmo disporre in modo orizzontale.
<div id="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
Lasciando le cose così come stanno i div saranno posizionati uno sotto l’altro. Quindi dobbiamo utilizzare il codice CSS per disporli in orizzontale.

Intanto dobbiamo impostare la larghezza e l’altezza del div contenitore (wrapper):

#wrapper{
width:320px;
height:60px;
background:#EFEFEF;
}

Poi dovremo definire le proprietà della classe .section, in questo modo:

.section{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}

Ora siamo in questa situazione:

Come vedi il primo div ha un margine sinistro di troppo, che bisogna rimuovere. Per risolvere questo problema utilizzeremo il selettore firt-child, che permetterà di prendere il primo div contenuto nel div “wrapper”, e poi assegneremo il valore 0 a margin-left

#wrapper div:first-child{margin-left:0px;}

In questo modo otteniamo il risultato desiderato:

Questo selettore, tanto per cambiare, non è supportato da internet explorer 6. La soluzione è utilizzare i commenti condizionali per uno specifico foglio di stile CSS, dove dovrai aggiungere una nuova classe con la proprietò margin-left settata a 0.

Fonte e immagini: Woork