Page 1 sur 1
Simuler l'alignement d'un tableau
Posté : 29 juil. 2008, 15:55
par guilt92
Bonjour,
Je butte sur un problème sûrement simple de CSS mais je n'arrive pas à obtenir ce que je veux.
Je voudrais simplement dans un formulaire avoir tous les champs input (et autres) alignés, indépendamment du label qui les précède.
Si je faisais un tableau par exemple avec
Code : Tout sélectionner
<tr>
<td><label>Prénom : </label></td>
<td><input type="text"/>
</tr>
<tr>
<td><label>Nom de famille : </label></td>
<td><input type="text"/>
</tr>
Si je fais cela, mes deux input seront alignés alors que "Nom de famille" est plus long que "Prénom".
Comment faire de même en css ? Peut on définir une marge relative à la taille du texte ? Je voudrais pas passer mes input en absolute juste pour ca, je ne vois pas comment faire...
Merci.
Posté : 29 juil. 2008, 16:12
par AB
Une des solutions en css (et sans passer par les tables) est de donner des dimensions à tes éléments.
Posté : 29 juil. 2008, 16:22
par Victor BRITO
En CSS, la position passe par le positionnement flottant ou, mieux encore (solution valable pour Firefox, Opera et Safari), par un display: inline-table, le tout avec des largeurs définies.
Solution 1
Solution 2
Posté : 29 juil. 2008, 16:31
par guilt92
Merci beaucoup.
J'avais pensé à width mais ca faisait rien sans le display...
le display:block me fait revenir à la ligne et le display:inline-table ne fonctionne pas (je ne suis pas dans un tableau), j'ai mis un display:inline-block.
Problème : ca ne fonctionne pas sous FF...
Donc je suis passé à la premiere solution (avec le float) qui marche bien sous IE et FF. C'est moins bien ?
Merci en tous cas
Posté : 29 juil. 2008, 16:41
par Victor BRITO
La valeur inline-table de la propriété display peut s'appliquer à un élément qui ne fait pas partie d'un tableau HTML, pour simuler l'affichage d'un tableau affiché en ligne ; de même que display: block simule le comportement d'un élément de bloc (dimensions, marges et remplissages verticaux, passage à la ligne de l'élément suivant...).
Quant à display: inline-block, c'est une autre solution envisageable (mais qui ne marche pas sous Firefox 2, qui reconnaît à la place -moz-inline-box, ni sous les versions d'IE antérieures à la 8, qui ne l'implémentent que pour le haslayout).
Posté : 29 juil. 2008, 17:22
par AB
Merci beaucoup.
J'avais pensé à width mais ca faisait rien sans le display...
le display:block me fait revenir à la ligne et le display:inline-table ne fonctionne pas (je ne suis pas dans un tableau), j'ai mis un display:inline-block.
Problème : ca ne fonctionne pas sous FF...
Donc je suis passé à la premiere solution (avec le float) qui marche bien sous IE et FF. C'est moins bien ?
Merci en tous cas
Tu peux aussi utiliser simplement display:inline pour aligner des éléments de type bloc et ça passe normalement partout.
Ta soluce est bonne également.
Posté : 29 juil. 2008, 17:35
par Victor BRITO
Tu peux aussi utiliser simplement display:inline pour aligner des éléments de type bloc et ça passe normalement partout.
Sauf que tu ne pourras plus donner des dimensions et que seules les marges et espacements (padding) latéraux seront pris en compte.
Posté : 29 juil. 2008, 17:37
par AB
Tu peux aussi utiliser simplement display:inline pour aligner des éléments de type bloc et ça passe normalement partout.
Sauf que tu ne pourras plus donner des dimensions et que seules les marges et espacements (padding) latéraux seront pris en compte.
oupps très juste
Posté : 31 juil. 2008, 15:38
par guilt92
Parfait merci beaucoup pour ces informations.