« Layout a colonne di form con il CSS inline-block »

6 settembre 2011 @ 17:19
Stavo curiosando sui layout di alcuni form quando per caso mi sono imbattuto in una soluzione semplice ed efficace per ottenere dei form incolonnati in maniera pulita con due soli tocchi di css e zero tabelle:
Da così:
A così:
Il trucco è l'utilizzo del CSS display:inline-block; sia all'etichetta che all'elemento del form.
Qual è l'utilità di questo bel coso? In pratica fa diventare gli elementi inline un po' block, ma non del tutto. Il problema degli elementi inline (tipo span, em, label, input, ...) è che non possono accettare alcuni attributi, per esempio non puoi settare la larghezza di un elemento inline, il browser la rifiuta perchè l'elemento inline deve scorrere nel testo così com'è.
Elementi posizionati senza inline-block
Facendo diventare gli elementi inline-block invece il browser è costretto ad accettare il dimensionamento degli elementi.
Elementi posizionati con inline-block
in questo modo si ottengono delle belle colonnine ordinate.
La cosa ancora più carina è quanto è facile avere anche degli allineamenti centrati,  cosa che di solito si ottiene a suon di tabelle, bestemmie e sudore. Gli elementi inline-block restano pur sempre degli inline, per cui se si imposta la centratura del testo (text-align: center) all'elemento padre, e si impostano muanualmente le cetrature delle tichette (sono ereditarie) si ottiene  un bel form centrato aggratis:

Drawbacks e potenziali problemi

  • Come al solito IE7 ha un supporto parziale al CSS inline block. E come al solito, who fucking cares.
  • Come vedete il dimensionamento degli elementi non è sempre coerente al 100%. La piccola sfalsatura che si vede è dovuta dal fatto che  una text input e a una select  fisate a width: 20em; non vengono larghe uguale

Lascia un commento