Allineamento della linea di base delle etichette di campo con la linea di base del testo negli input di testo

Question

Sto visualizzando gli input di testo accanto a un testo di etichetta in un fieldset. Mi piacerebbe che la linea di base del testo nel testo immettesse in linea con la linea di base del testo dell'etichetta. Potrei impostare un fattore Fudge padding-top per i miei elementi .label ma il contenuto dei miei elementi .value potrebbe contenere testo di sola lettura e questo rovinerebbe l'allineamento della linea di base etichetta/valore per quei campi. Sospetto anche che sarebbero necessari diversi fattori fudge per i diversi browser a causa delle differenze di altezza tra i campi di input tra i vari browser.

Qualcuno ha qualche idea su come ottenere la mia etichetta e inserire le linee di base del testo per l'allineamento? Il mio testo etichetta può estendersi su più righe e come tale mi piacerebbe che qualsiasi soluzione prendesse in considerazione ciò.

È possibile visualizzare un esempio dal vivo il seguente codice a http://jsbin.com/enobe3.

CSS

* { 
    font-family: sans-serif; 
    font-size: 13px; 
} 

.field { 
    clear: left; 
    padding-top: 5px; 
} 

.label { 
    float: left; 
    width: 90px; 
} 

.value { 
    margin-left: 90px; 
    padding-left: 10px; 
} 

HTML

<fieldset> 
    <div class="field"> 
     <div class="label">A short label</div> 
     <div class="value">Some text</div> 
    </div> 
    <div class="field"> 
     <div class="label">A long long long long long long long wrapping label</div> 
     <div class="value">Some text</div> 
    </div> 
    <div class="field"> 
     <div class="label">A short label</div> 
     <div class="value"><input value="Some text"/></div> 
    </div> 
    <div class="field"> 
     <div class="label">A long long long long long long long wrapping label</div> 
     <div class="value"><input value="Some text"/></div> 
    </div> 
</fieldset> 

Answer 1

La linea di base problema di allineamento è legato l'altezza della linea di default per le caselle di testo e campo di immissione.

input i campi hanno un'altezza predefinita più ampia per contenere padding, bordo e testo.

ho sperimentato con il codice HTML/CSS e frammenti di codice postato la mia versione al http://jsfiddle.net/audetwebdesign/EbuJH/

ho aggiunto alcuni colori di sfondo, un po 'di padding e margini di delineare i blocchi.

La chiave è impostare la proprietà line-height in modo che le etichette e i campi di input abbiano lo stesso valore, 2.0 nel mio esempio.

.field { 
    clear: left; 
    padding: 5px 0; 
    background-color: lightgray; 
    overflow: auto; 
    margin-bottom: 5px; 
    line-height: 2.00; /* Key property */ 
} 

È possibile regolare l'altezza della linea per avere un'idea di come funziona.

Ho testato l'esempio in Firefox e IE8 e i risultati sono coerenti con un doctype rigoroso.

Il risultato funziona bene per le etichette a linea singola. L'unico inconveniente è che le etichette multilinea possono avere più spaziature di quelle che ti piacciono. Puoi ovviare a questo problema inserendo la prima riga dell'etichetta multilinea in una campata e applicando l'altezza della linea solo allo span, ma questo è un lavoro extra.

Almeno sappiamo capire cosa controlla il posizionamento di base, in modo che possiamo fare progressi.