Inizio Interfaccia utente sul blog (YUIBlog)

CSS Quick Suggerimento: Scatole in linea con allineamento in basso

15 novembre 2010 alle ore 03:09 da Thierry Koblentz | In CSS 101 , Sviluppo | 8 commenti

La sfida

Mantenere un pulsante di invio in fondo a una scatola di linea, in linea con i controlli dei moduli posizionati sotto la loro etichetta (Figura 1).

La parte difficile

Se il blocco contenitore non è sufficientemente ampia per il pulsante di invio di flusso accanto ai controlli di altri, il pulsante deve mostrare all'inizio della riga successiva finestra (secondo RTL / LTR contesto) con lo spazio minimo sopra di esso (Figura 2).

La soluzione

display:inline-block ci permettono di tenere tutto nel flusso e nella parte inferiore del riquadrato di riga. Questo perché inline-block genera un riquadrato a blocco (vedi 9.2.4 La proprietà 'display' ), che è scorreva come un riquadrato in riga sola, simile ad un elemento sostituito (cioè un'immagine).

Il markup

Noi etichetta di gruppo e le coppie di controllo interno div s.

 <form>
 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <input /> 
 </ Div>
 </ Form>

Il CSS

 label {display: block;}
 p {
 display: inline-block;
 margin: 0 10px 10px 0;
 * Display: inline;
 zoom: 1;
 } 

Per posizionare i controlli sotto la loro etichetta associata, abbiamo stile le etichette con display:block (senza questi dati, questi elementi sarebbero show side-by-side).

Si noti che le etichette styling come blocco non li rende espandersi oltre la forma, ma solo attraverso le loro scatole genitore - che condividono la casella stessa linea. Questo perché l'interno di un inline-block è formattato come un riquadrato a blocco, e lo stesso box è formattato come un riquadrato in riga.

Le ultime due regole sono per IE 6 e 7 che non supportano inline-block . Per questi browser, abbiamo bisogno di stile del div s come in linea e utilizzare zoom . Si noti che questo hack non è così robusta come la cosa vera perché un nidificato (non sostituito) elemento con un layout si rompe tutto, seduti sulla propria riga all'interno del modulo. Quindi, a meno che non si prevede di dare ad una larghezza di elementi annidati, non dare loro un layout.

Il Demo

Anno 2010

Mese Gennaio

Giorno 1

Anno 2010

Mese Gennaio

Giorno 1

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

8 commenti »

RSS feed dei commenti a questo post.

1. Buona IE6 e 7 ole

   Commento di Jeffrey Gilbert - 16 novembre 2010 #

2. Sei sicuro che inline-block non è supportato in tutti i IE6? Forse display: inline-block mode non è * completamente * supportato in IE6.

   Ricordo che dopo tre anni in una società di web scrittura IE6 giorno compatibile siti dopo giorno, ho riconsiderato questa modalità di visualizzazione spesso trascurato. Mi aveva assunto per lungo tempo che non avrebbe funzionato, ma lo ha fatto. Ho avuto questi pulsanti che ho affinato nel tempo, che possono avere testo a lunghezza variabile in essa, con le immagini solito angolo arrotondato sfondo un tutto. Li ho convertiti in inline-block e trovato hanno lavorato bene in IE6, in modo che contribuito a ridurre il CSS un po '. Un effetto collaterale molto bello era che i pulsanti non avrebbe più rompere quando il pulsante è stipato in una cella piccola, qualcosa che non ho potuto risolvere con la mia linea precedente + line-height pulsanti (questi erano i pulsanti veramente flessibile per le imprese, come siti web, che non ha utilizzato galleggiante e modalità di blocco, ma potrebbe avere le immagini di sfondo, con i lati arrotondati e hover ecc immagine).

   Commento di Fabrice - 16 novembre 2010 #

3. Ah, quirksmode dice inline-block supporto su IE6 / 7 è solo per "naturali" elementi in linea. Questo spiega perché il mio inline-block bottoni lavorato in IE6 (erano fatti di A SPAN>).

   Nell'esempio MODULO sopra ho il sospetto passaggio del DIV a LUCI sarebbe farlo funzionare su IE6, ma poi probabilmente non ha importanza ;-)

   Commento di Fabrice - 16 novembre 2010 #

4. @ Fabrice

   Questo perché display: inline-block fornisce elementi a disposizione.
   Come nota a margine, questo valore può essere utilizzato come un interruttore layout. Per esempio:

   a {display: inline-block;}
   a {display: inline;}

   Quanto sopra darà la qualità di layout (in IE).
   Si noti che questo non avrebbe funzionato se i due dichiarazioni sono state utilizzate nella stessa regola.

   Commento di Thierry Koblentz - Nov 16, 2010 #

5. La parte difficile Se il blocco contenitore non è sufficientemente ampia per il pulsante di invio di flusso accanto ai controlli di altri, il pulsante deve mostrare all'inizio della riga successiva finestra (secondo RTL / LTR contesto) con lo spazio minimo sopra di esso (Figura 2). Il display soluzione: inline-block ci permettono di tenere tutto nel flusso e nella parte inferiore del riquadrato di riga.

   Commento di Hindi Reply SMS - 16 novembre 2010 #

6. lo stesso approccio viene utilizzato anche qui http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

   Commento di Ionut Popa - Nov 17, 2010 #

7. @ Ionut

   Anni fa ho messo una demo su tjkdesign.com per visualizzare le miniature in base a questo metodo:

   http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-box_and_zoom.asp

   Ho avuto altri modi interessanti per visualizzare questi:

   La parte inferiore dell'immagine è la linea di base:
   - http://tjkdesign.com/articles/thumbnail_and_caption/image_grid.asp

   Il fondo della voce è la linea di base:
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-stack_and_zoom.asp

   La visualizzazione degli elementi in una griglia:
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-cell_and_zoom.asp

   Commento di Thierry Koblentz - 17 NOV 2010 #

8. @ @ Ionut e Thierry

   Ho anche messo qualcosa sul mio sito qualche tempo fa. Può essere un po 'più facile da capire come si cerca solo di mostrare una soluzione per il display: inline-block modo in cui il consorzio definisce standard.

   http://www.roydukkey.com/display-inline-block-zoom/

   Commento di roydukkey - 24 Novembre 2010 #

Lascia un commento