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

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 *