Ajuster un input avec un label inline pour s’adapter en largeur

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Inputs responsives et adaptables en largeur
Label inline et Input responsive et adaptable en largeur

Démo : Input qui s’adapte à toute la largeur du bloc avec un label inline.

Les labels sont des blocs inline, les inputs s’adaptent en largeur dans le bloc parent.

CSS :

HTML :

Pour rendre la zone responsive, on ajoute au CSS :

La valeur max-width est à ajuster en fonction de la longueur des labels.

Et hop, de jolies zones de saisie alignées en largeur.

 

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.