Comment aligner correctement les éléments span et input ?

Question

Je veux aligner un <span> et l'élément <input> élément de texte. La hauteur de <input> y <span> doivent être identiques, les bordures supérieure et inférieure doivent être sur la même ligne et le texte à l'intérieur de l'élément <input> y <span> doivent être sur la même ligne.

.cnt {
  margin: 5px;
}
.one {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.two {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
input {
  padding: 0;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

https://jsfiddle.net/ajo4boom/

Comment faire ce que je veux ?

Answer 1

J'ai trouvé du succès en utilisant une feuille de style externe telle que normaliser.css . Ils sont très utiles pour s'assurer que vos balises restent alignées sur tous les navigateurs.

Une autre solution serait de faire ce qui suit :

.cnt {
  margin: 5px;
}
.one {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.two {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
input {
  position: relative;
  top: -1px;
  padding: 0;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

Il suffit de décaler le <input> en ajoutant

input {
    position: relative;
    top: -1px;
}

Plus d'informations sur le positionnement relatif en CSS.

Answer 2

Il suffit d'ajouter vertical-align à l'entrée.

Vérifiez : https://jsfiddle.net/ajo4boom/1/

Answer 3

Vous pouvez utiliser la boîte à outils de votre navigateur ou l'extension de Mozilla : firebug, pour vous aider à trouver l'origine du problème. Vous verrez que seule l'entrée a réellement une hauteur de 17px. Les espaces étaient, dans la réalité du navigateur, de 19px de hauteur.

Ainsi, définir la hauteur de votre span à 19px devrait également fonctionner.

Answer 4

De nombreuses propriétés natives des entrées seront différentes de celles des travées. Tout d'abord, vous voudrez peut-être aussi normaliser border , font-family , font-size , line-height y padding .

Pour profiter de la height définir la propriété display: inline-block sur les deux éléments. Aussi, box-sizing: content-box s'assurera qu'ils ont les mêmes Taille de la boîte c'est-à-dire le chemin padding y borders affecteront leur height y width .

.one, .two, .in {
  box-sizing: content-box;
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
  display: inline-block;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 18px;
  padding: 2px;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

Answer 5

Voici une solution possible en utilisant display: inline-block; , line-height y vertical-align mais c'est comme le commentaire de @Leeish :

Les hauteurs sont difficiles à saisir car les navigateurs aiment tous faire leur propre truc

.cnt {
  margin: 5px;
}
label {
  display: inline-block;
}
input {
  padding: 0;
}
.one, .two, .in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
  display: inline-block;
  line-height: 17px;
  vertical-align: top;
}

<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>