Simuler l'alignement d'un tableau

29 juil. 2008, 15:55

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.

29 juil. 2008, 16:12

Une des solutions en css (et sans passer par les tables) est de donner des dimensions à tes éléments.

29 juil. 2008, 16:22

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

Code : Tout sélectionner

label {
  display: block;
  width: 10em;
  float: left;
}

Solution 2

Code : Tout sélectionner

label, input {
  display: inline-table;
  width: 10em;
}

29 juil. 2008, 16:31

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

29 juil. 2008, 16:41

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).

29 juil. 2008, 17:22

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.

29 juil. 2008, 17:35

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.

29 juil. 2008, 17:37

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

31 juil. 2008, 15:38

Parfait merci beaucoup pour ces informations.

Simuler l'alignement d'un tableau

Qui est en ligne