La largeur est de 1140 px. Le contenu de l'onglet 1 est plus et prend une largeur de 1140 px. donc pour maintenir la cohérence ne peut pas changer ou réduire la largeur Suggérer une autre disposition ou une meilleure solution
Vous pouvez réorganiser les zones de texte 1, 2 et 3 en colonnes. Considérez également que les largeurs fixes sont presque inexistantes, vous devez donc concevoir les colonnes avec un comportement réactif approprié.
Si vous avez besoin d'utiliser la même carte pour les deux onglets (large et court), vos options sont les suivantes:
Comme vous mentionnez que l'option 1 n'est pas possible, vous ne pouvez conserver que la grande largeur dans l'onglet court.
L'espace vide n'est pas un problème dans votre conception. Vous pouvez donc simplement le garder. La seule chose est que le bouton d'action (réinitialiser le mot de passe) devrait être à droite ou à gauche de l'onglet.
D'après vos commentaires sur les solutions suggérées jusqu'à présent, il semble que cette mise en page fonctionne déjà de manière cohérente dans votre style à l'échelle du site.
Ma seule recommandation est la suivante (basée sur la façon dont j'ai créé des formulaires dans le passé): pour mieux attirer l'attention des utilisateurs sur le formulaire, envisagez d'ajouter une légère nuance de fond gris (#efefef ou similaire) aux formulaires (dans tous les onglets) , puis définissez l'arrière-plan du conteneur d'onglets sur blanc. Si le remplissage est défini sur ou dans le formulaire, pas sur le conteneur d'onglets, le fond blanc ne s'affiche que lorsque le formulaire n'est pas pleine largeur. Lorsque cet onglet particulier est actif, le blanc serait visible à droite du formulaire.
Cela créerait un signal visuel pour l'utilisateur que la largeur du formulaire est intentionnelle. De plus, la couleur grise derrière les entrées de formulaire blanc est plus attrayante visuellement que le blanc sur blanc. Si cela vous regarde, conservez l'original. Ma suggestion peut ne pas sembler bonne, car vous utilisez déjà le gris comme arrière-plan derrière les onglets. Les utilisateurs attendent de la cohérence, et c'est ce que vous leur avez donné. Bonne chance!
Vous pouvez disposer horizontalement trois champs, ou une carte dessinée à la main est placée dans une zone vierge, en plus je pense que changer le mot de passe et le compte pour utiliser le TAB n'est pas raisonnable.
Si vous préférez que le formulaire utilise un espace plus horizontal, vous pouvez également envisager de placer les étiquettes à gauche des champs. Bien qu'il y ait quelques inconvénients à cela ( cet article résume les avantages et les inconvénients ) vos étiquettes sont quelque peu de la même longueur, donc cela ne devrait pas être trop gros.
Je peux suggérer de définir vos entrées dans une carte intérieure de deux manières: