Como hacer <span> la misma altura que <input type = "text">

Estoy tratando de poner un elemento a la izquierda de un elemento, sin embargo, me parece que no puede hacer que la misma altura y se alinean con cada uno otro. El lapso siempre parece estar posicionado un poco más alto.Como hacer <span> la misma altura que <input type = "text">

¿Alguien tiene alguna idea?

Sparkles *

Editar: sección HTML

<label for="name">Username: </label> 
<input type="text" name="name" id="name" value="" maxlength="15"/> 
<span id="box" style="display:none"></span>

CSS

span.box{ 
    position:absolute; 
    width:100px; 
    margin-left:20px; 
    border:1px; 
    padding:2px; 
    height: 16px; 
} 

input.name { 
    width: 115px; 
    height: 14px; 
}

Fuente

2010-11-18 Sparkles

Por favor, ponga una porción de su código, la solución varía en función del tipo de etiquetas utilizadas –

Si usted está tratando de etiquetar los campos de entrada, probar el etiqueta de la etiqueta (http://www.w3schools.com/tags/tag_label.asp) –

Si desea alinear verticalmente los elementos en la misma línea, es probable que no lo hace necesidad para hacerlos de la misma altura, solo dales el mismo valor para la propiedad vertical-align.

.myinput, .myspan { 
    vertical-align: middle; 
}

Lo que mucha gente no entiende la vertical-align es que para que las cosas se alinean verticalmente a la mitad, todo en esa línea tiene que tener una propiedad vertical-align del 'medio' - no solo una cosa (como el lapso).

Imagine una línea horizontal invisible corriendo a pesar de cualquier contenido en línea. Por lo general, la línea de base del texto y la parte inferior de las imágenes se alinean con esta línea. Sin embargo, si cambia la alineación vertical al centro, entonces la mitad del elemento (extensión de texto, imagen, etc.) se alinea con esta línea. Sin embargo, eso no se alineará verticalmente con otros elementos si todavía están alineando su parte inferior o línea de base con esa línea; también necesitarían alinear su centro a esa línea.

Fuente

2010-11-18 02:59:49 thomasrutter

wow que funciona! ahora solo tengo que igualar las alturas, ¡gracias a todos! :) – Sparkles

Gracias por "todo en esa línea tiene que tener una propiedad de alineación vertical de 'medio'" ..! –

alturas de pozo pueden variar a través de diferentes navegadores de esta manera. – SuperDuck

acolchado Probar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
    <style type="text/css"> 
     .lbl { 
      background-color:lime; 
      padding:0; 
     } 
     .t { 
      height:17px; 
      padding:0; 
     } 
    </style> 
</head> 
<body> 
    <span class="lbl">My label : </span> 
    <input class="t" type="text" name="t"> 
</body>

Tenga en 'periodo' mente es un elemento en línea, en lugar de un bloque lev el elemento, por lo que las definiciones de tamaño no se aplican, a menos que utilice 'display: block' propiedad CSS. Los elementos en línea obtienen el tamaño de los contenidos, por lo que las cosas como el tamaño de la fuente son los que definen la altura de ese tramo.

también que haría uso de la etiqueta 'etiqueta' con el 'para' atributo, en lugar de un 'lapso'. Esto hace que una mejor estructura, y tiene la ventaja de mover el foco a la entradahaciendo clic en la etiqueta.

El siguiente es un ejemplo a nivel de bloque, que permite pixel por pixel para la alineación de todos los navegadores:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <style type="text/css"> .lbl { background-color: lime; border: 1px solid silver; display: block; float: left; font-size: 12px; height: 16px; padding: 2px; width: 100px; } .t { border: 1px solid silver; display: block; float: left; font-size: 12px; height: 16px; margin-left: 4px; padding: 2px; width: 150px; } </style> </head> <body> <label class="lbl">My label : </label> <input class="t" type="text" name="t"> </body>

Fuente

2010-11-18 02:15:20 SuperDuck

Hola, ya estoy usando la etiqueta antes de la entrada, esto es un lapso oculto que aparece si se devuelve un error al formulario. Probé el relleno, lo hace del mismo tamaño pero ahora está un poco más alto que el cuadro de entrada. – Sparkles

eso es porque el borde del cuadro de entrada.si tiene un fondo o borde visible e intenta alinear píxel por píxel, puede usarlo a nivel de bloque, ya que las alturas de fuente pueden variar un poco dependiendo del navegador y del sistema. Estoy agregando un bloque de nivel-ejemplo a la respuesta. – SuperDuck

aquí es una versión ligeramente retocada de código SuperDucks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
<style type="text/css"> 
    .lbl { 
     background-color:lime; 
     padding:0; 
    line-height: 24px; 
    height: 24px; 
    display: inline-block; 
    } 
    .t { 
     height:17px; 
     padding:0; 
     height: 20px; 
     display: inline-block; 
    } 
</style> 
</head> 
<body> 
    <span class="lbl">My label : </span> 
    <input class="t" type="text" name="t"> 
</body>

Fuente

2010-11-18 03:12:59

tenga en cuenta que Inline-Block no está disponible en la plataforma de IE. Soy fanático de los bloques en línea; de lo contrario =) – SuperDuck

tienes razón, pero a partir de IE8, es compatible, así que, con suerte, algún día pronto, podemos usarlo sin preocupaciones –

también, IE 6/7 soporte en línea bloque en elementos en línea, de acuerdo con esto, por lo que podría funcionar? http://www.quirksmode.org/css/display.html –

Como hacer <span> la misma altura que <input type = "text">

Respuesta

Cuestiones relacionadas