Comment faire <span> la même hauteur que <input type = "text">

Je suis en train de mettre un élément à gauche d'un élément, mais je ne peux pas sembler les faire la même hauteur et aligner avec chaque autre. L'envergure semble toujours être positionnée un peu plus haut.Comment faire <span> la même hauteur que <input type = "text">

Vous avez des idées?

Sparkles *

Edit: section 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; 
}

Source

2010-11-18 Sparkles

S'il vous plaît mettre une partie de votre code, la solution varie en fonction du type d'étiquettes utilisées –

Si vous essayez d'étiqueter les champs d'entrée, essayez la Étiquette étiquette (http://www.w3schools.com/tags/tag_label.asp) –

Si vous souhaitez aligner verticalement les éléments dans la même ligne, vous avez probablement ne pas besoin pour leur donner la même hauteur - donnez-leur la même valeur pour la propriété vertical-align.

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

Ce que beaucoup de gens ne comprennent pas vertical-align est que pour que les choses soient alignées verticalement au milieu, tout dans cette ligne doit avoir une propriété verticale align du « milieu » - Pas seulement une chose (comme la durée). Imaginez une ligne horizontale invisible passant par n'importe quel contenu en ligne. Habituellement, la ligne de base du texte et le bas des images sont alignés avec cette ligne. Cependant, si vous changez d'alignement vertical au milieu, le milieu de l'élément (texte, image, etc.) est aligné avec cette ligne. Cependant, cela ne va pas s'aligner verticalement avec d'autres éléments s'ils alignent toujours leur bas ou leur ligne de base sur cette ligne - ils devront également aligner leur milieu sur cette ligne.

Source

2010-11-18 02:59:49 thomasrutter

ouah ça marche! maintenant je dois juste faire correspondre les hauteurs, merci tout le monde! :) – Sparkles

Merci pour "tout dans cette ligne doit avoir une propriété vertical-aligner de 'middle'" ..! –

les hauteurs de puits peuvent varier de différents navigateurs de cette façon. – SuperDuck

rembourrage Essayez:

<!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>

Gardez à l' 'espace' esprit est un élément en ligne, plutôt qu'un bloc de lev el, donc les définitions de taille ne s'appliquent pas, sauf si vous utilisez la propriété CSS 'display: block'. Les éléments en ligne obtiennent la taille du contenu, donc des choses comme la taille de police sont ce qui définit la hauteur de cette étendue.

De même, j'utiliserais la balise 'label' avec l'attribut 'for' plutôt qu'un 'span'. Cela rend une meilleure structure, et a l'avantage de déplacer le focus sur l'entrée en cliquant sur l'étiquette .

Ce qui suit est un exemple de niveau bloc, ce qui permet pixel par un alignement de pixels pour chaque navigateur:

<!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>

Source

2010-11-18 02:15:20 SuperDuck

howdy, j'utilise déjà la balise avant l'entrée, il s'agit d'une plage cachée qui apparaît si une erreur est retournée au formulaire. J'ai essayé le rembourrage, il fait la même taille mais maintenant il se trouve un peu plus haut que la boîte d'entrée. – Sparkles

c'est parce que la bordure de la zone de saisie.Si vous avez un arrière-plan ou une bordure visible, et que vous essayez d'aligner pixel par pixel, vous pouvez utiliser le niveau de bloc, car les hauteurs de police peuvent varier légèrement en fonction du navigateur et du système. J'ajoute un exemple de niveau de bloc à la réponse. – SuperDuck

est ici une version légèrement retouchée code 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>

Source

2010-11-18 03:12:59

s'il vous plaît noter que inline-block n'est pas disponible sur la plate-forme IE. Je suis un fan de inline-blocks autrement =) – SuperDuck

vous avez raison, mais à partir de IE8, son pris en charge, donc, espérons, un jour bientôt, nous pouvons l'utiliser sans soucis –

aussi, IE 6/7 support inline-block sur les éléments en ligne, selon cela, donc cela pourrait fonctionner? http://www.quirksmode.org/css/display.html –

Comment faire <span> la même hauteur que <input type = "text">

Répondre

Questions connexes