28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Je suis étudiant en DUT SRC et je travaille actuellement sur un projet collectif.
Je dois intégrer la maquette graphique du site, mais je coince avec le formulaire de contact...
Voilà ce que je devrais obtenir :

http://img81.xooimage.com/files/1/0/2/sans-titre-33f490d.png

Le problème c'est que je n'ai pas trouvé comment aligner les inputs de type texte en CSS. Du coup sa me donne ça :

http://img78.xooimage.com/files/a/0/6/sans-titre2-33f4941.png

J'ai testé avec des margin mais c'est pas très sémantique et pas très efficace Smiley ravi

Si vous pouvez me donner l'astuce sa serait bien gentil Smiley biggrin
Modérateur
Dans ce cas là, tu peux mettre les labels en display: inline-block, et leur donner une largeur fixe.
Bien entendu, cela posera des problèmes si tu n'es pas sûr du contenu des labels.

Une autre manière un peu plus propre serait donc d'utiliser une mise en page tabulaire, à l'aide de display: table-cell voir un bon vieux tableau pour plus de compatibilité avec de vieux navigateurs.
Bonjour,

Une solution simple serait d'aligner à droite les éléments contenant les labels et les imputs et à les doter d'une marge droite de l'importance nécessaire.
J'ai mis en application la solution de kustolovic, avec les inline-block, le résultat est bon. Avec table-cell sa fonctionne très bien aussi, mais je suis resté sur le inline-block qui perturbe moins lorsqu'on effectue un zoom texte seulement.

Merci pour votre aide !