Aligner un input text avec un span/div

Aligner un input text avec un span/div - HTML/CSS - Programmation

Marsh Posté le 06-10-2017 à 10:53:48    

Bonjour,
 
J'ai un formulaire et je souhaiterais rendre les input text un peu plus habillés en affichant devant une zone de couleur avec des icônes à l'intérieur (en l'occurence avec Font Awesome).
 
En gros mon HTML (tout ce qu'il y a de plus simple):
 

Code :
  1. <form class="ma_class">
  2. <span class="icône"><balise_FA></span><input type="text" name="texte" id="texte">
  3. </form>


 
L'input text à une hauteur de 30px, plus des bordures de 1px.
Afin d'arriver à la même hauteur, le span fait 34px (déjà je trouve ça bizarre mais bon...). Mais je ne parviens pas à l'aligner parfaitement avec l'input text, il y a toujours un petit décalage avec le haut ou le bas suivant que je joue avec la hauteur, le padding-top, etc...
J'y étais parvenu sur un formulaire et là, je le réutilise sur un autre et j'ai des décalages (et pas de CSS en conflit)...
 
Bref, si vous avez des astuces pour que cet alignement fonctionne à coup sûr, ça serait parfait...
 
Merci!

Reply

Marsh Posté le 06-10-2017 à 10:53:48   

Reply

Marsh Posté le 06-10-2017 à 11:55:41    

En y regardant de plus près, il se trouve que l'input text n'est pas vraiment collé en haut de la balise form à l'affichage, ce qui crée ce décalage vers le haut des autres contenus du formulaire.
J'ai beau mettre des padding et des margin à 0, rien n'y fait.
 
Mon input text fait 34px de haut tandis que le form en fait d'après Firefox 37.5...

Reply

Marsh Posté le 06-10-2017 à 12:02:31    

Bon, je viens de trouver une solution, je ne sais pas si c'est la meilleure mais ça fonctionne laors je le mets au cas où d'autres seraient confronté au même souci.
 
J'ai tout simplement mis mon form en display:flex, en flex-direction:row et nowrap.
Tout est bien aligné et plus de souci de marge haut dessus de l'input...
 
S'il existe une solution plus "propre" je suis preneur, j'ai une sensation de bricolage là... ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed