« 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:
in questo modo si ottengono delle belle colonnine ordinate.
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'è.
Facendo diventare gli elementi inline-block invece il browser è costretto ad accettare il dimensionamento degli elementi.
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
