Alineación vertical de la etiqueta CSS con los campos de entrada

Estoy diseñando un diseño de formulario para ser publicado en muchas páginas dentro de un sistema en línea. Un devoto usuario de tablas para este propósito durante muchos años, ahora estoy acostumbrado a usar etiquetas CSS + para esto.Alineación vertical de la etiqueta CSS con los campos de entrada

Una cosa que todavía no he podido dominar es la forma en que los diferentes navegadores rellenan & colocan la etiqueta relativa al campo de entrada. Daré un ejemplo de código, más una imagen de cerca de cómo se renderiza en cada navegador (IE = IE9).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>HTML template</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <style> 
body { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    font-size:13px; 
    font-style:normal; 
    font-weight:normal; 
    letter-spacing:normal; 
    margin:20px; 
} 
input { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    border:solid 1px #666; 
    width:150px; 
} 
.fld { 
} 
.usr { 
    border:solid 1px red; 
} 
p { 
} 
</style> 
</head> 
<body> 
<p> 
    <label class="usr" for="email">Email*</label> 
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> 
</p> 
</body> 
</html>

OK - ahora puedo publicar una foto - que aquí es lo que parece después de los cambios de Ahmed Masud. Tenía razón: el archivo reset.css que tenía (desde http://html5reset.org/) no tenía relleno en el elemento de entrada. Sin embargo, incluso después de aplicar los cambios, todavía hay una variación en la alineación de la base del texto en la etiqueta en comparación con la de la entrada. Ahora Firefox está a nivel muerto, y para IE & Chrome, el texto de la etiqueta es 1px más alto.

enter image description here

Si quito el enlace a reset.css, las cosas cambian de nuevo: Chrome se convierte en nivel muertos, IE pone la etiqueta de 1 píxel más alto que el texto de entrada, Firefox 1px más bajo que el texto de entrada. Vea a continuación:

enter image description here

Debo señalar que se trata de un diseño muy básico, sólo para tratar de diagnosticar el problema. Haré que todo se vea mejor más tarde. Pero primero necesito saber cómo alinear todo mi texto en todos los navegadores con una sola solución CSS.

Fuente

2011-12-19 TMA-1

puede publicar su reset.css también pl ¿facilitar? –

Es de html5reset.org - agregó el enlace anterior, junto con la respuesta a su respuesta a continuación. –

alineaciones css Está bien son ligeramente un arte negro con CSS2 tan déjeme decirle lo que está sucediendo:

1) la reset.css usted tiene probablemente no es restableciendo el relleno del elemento de entrada que es la razón de que está recibiendo que fuera por un error medio píxel

Trate de añadir de inmediato a su estilo

Así que una cosa es que para eliminar el relleno de la entrada:

input { padding: 0 }

Ahora tendrá que ajustar la altura de las dos etiquetas y elementos de entrada:

.fld { height: 16px; } 
.usr { height: 16px; }

La otra cosa es que es probable que desee para alinear campos Nicely uno debajo del otro. Una forma de lograrlo es hacer la etiqueta de un bloque con los bienes dejados float:

.usr { display: block; float: left; }

y la .fld un bloque así:

.fld { display: block }

que le gustaría añadir algunos otros parámetros para p hacer que renderizar algo sea más estético

Esto es lo que hice para su archivo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>Southrock HTML template</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <style> 

body { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    font-size:13px; 
    margin:20px; 
} 

input { 
    border:solid 1px #666; 
    width:150px; 
    padding: 0; 
    height: 16px; 
} 

.fld { } 

.usr { 
    border:solid 1px red; 
    height: 16px; 
    display: block; 
    float: left; 
    margin-right: 5px; 
    width: 7em; 
} 

p { 
    clear: both; 
    margin-bottom: 5px; 
} 




</style> 
</head> 
<body> 
<p> 
    <label class="usr" for="email">Email*</label> 
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> 
</p> 
<p> 
    <label class="usr" for="email">First Name*</label> 
    <input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter"> 
</p> 
</body> 
</html>

Esto hace de la misma manera en el IE/Safari/FF/Opera

Fuente

2011-12-19 05:54:24

Gracias por tomarse el tiempo para responder: edité mi pregunta original anterior para incluir sus cambios. Todavía no se consigue la alineación perfecta por desgracia. –

Esta es una pregunta anterior, pero sigue siendo relevante a partir de mayo de 2016. La razón por la que funcionó para Ahmed en su respuesta y no para usted es porque podría estar utilizando un ZOOM. Encuentro que actualmente estoy luchando con el mismo problema EXACTO que tú. Cada vez que lo obtengo perfecto, en FF si ZOOM in a veces la etiqueta se mueve hacia arriba. Entonces, ajusto el CSS para empujarlo nuevamente hacia abajo, pero el problema es que la próxima vez que cambie el zoom, se apagará nuevamente en el otro sentido. Muy frustrante. He intentado muchas soluciones y ninguna es 100%. Además, a veces cambiar la fuente hará que se desalinee también ... – PerryCS

[Se inicia en stackoverflow por primera vez en años - wow - ¡esto ha tenido 10,000 vistas!] No se relacionó el zoom. Pero eso fue hace mucho tiempo, antes de que apareciera el bootstrap e hiciera que todo funcionara en una amplia gama de navegadores. Entonces ... tal vez debería cerrar esto ... –

Ésta es una manera de alinear:

<span> 
    <label>Email</label> 
    <input type="text" name="email" /> 
</span>

CSS:

form span { 
    vertical-align: middle; 
    display: block; 
    width: 100%; 
} 
form label { 
    display: inline-block; 
    float: none; 
    width: 150px; 
    padding: 0; 
    margin: 5px 0 0; 
    text-align: left; 
} 
form input { 
    display: inline-block; 
    float: none; 
    width:auto; 
    margin:5px 0 0 10px; 
    padding:5px 5px; 
}

Fuente

2013-05-29 18:31:15 Damian

Alineación vertical de la etiqueta CSS con los campos de entrada

Respuesta

Cuestiones relacionadas