Alineación de la línea de base de las etiquetas de campo con la línea de base de texto en las entradas de texto

Question

Estoy mostrando las entradas de texto junto a algún texto de etiqueta en un conjunto de campos. Me gustaría que la línea base del texto en las entradas de texto se alinee con la línea base del texto de la etiqueta. Podría establecer un factor de fundición padding-top para mis elementos .label, pero el contenido de mis elementos .value puede contener texto de solo lectura y esto arruinaría la alineación de la línea base de valores/valores para esos campos. También sospecho que se requerirían los diferentes factores de combinación para diferentes navegadores debido a las diferencias de altura entre los campos de entrada de los navegadores.

¿Alguien tiene alguna idea de cómo puedo alinear mis líneas de base de texto de entrada y etiqueta? El texto de mi etiqueta puede abarcar varias líneas y, como tal, me gustaría que cualquier solución lo tenga en cuenta.

Puede ver un ejemplo en vivo del siguiente código en 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 tema alineación

<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 línea de base se relaciona con la altura de la línea predeterminada para los cuadros de texto y campo de entrada.

input campos tienen una altura predeterminada más grande para acomodar relleno, borde y texto.

Experimenté con su HTML/CSS y fragmentos de código publicado mi versión en http://jsfiddle.net/audetwebdesign/EbuJH/

he añadido algunos colores de fondo, algo de relleno y los márgenes para delinear los bloques.

La clave es establecer la propiedad line-height para que sus etiquetas y campos de entrada tengan el mismo valor, 2.0 en mi ejemplo.

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

Puede ajustar la altura de la línea para tener una idea de cómo funciona.

Probé el ejemplo en Firefox e IE8 y los resultados son consistentes con un doctype estricto.

El resultado funciona bien para etiquetas de una sola línea. El único inconveniente es que las etiquetas de varias líneas pueden tener más espacio del que te gusta. Podría solucionar esto colocando la primera línea de la etiqueta multilínea en un tramo y aplicando la altura de línea solo al tramo, pero eso es trabajo adicional.

Al menos sabemos entender qué controla el posicionamiento de la línea base, para que podamos avanzar.