Notre référente CSS, Tetue, propose de réaliser des formulaires en utilisant des listes ul / li pour assurer leur structure, associés à des labels ayant un display inline-block.

L’affichage se présente bien quelque soit le navigateur, mais nous sommes vite confrontés à un problème...

Dès que l’on veut ajouter plus d’un élément entre 2 labels, le second élément est alors positionné sous le label, aligné à gauche, et non sous le premier élément avec le même alignement. Ainsi, s’il y a une erreur sur un des champs dans l’exemple, l’erreur sera affichée décalée sur la gauche par rapport à l’input qu’elle représente.

Pour combler cela, il est possible de déclarer le label en float:left ; et d’attribuer une marge identique à tous les éléments contenus entre 2 labels, ce qui est vite rébarbatif.

Voici une autre solution utilisant une marge négative.

Formulaire reprisé

Pour positionner l’ensemble, nous allons jouer avec des marges négatives. Schématisé, cela donne :

1) on applique un padding gauche au LI supérieur à la taille du label (ex:120px)

2) on demande au label d’être flottant et décalé sur la gauche (via un margin négatif)

3) lorsqu’un fieldset suit un li, on le décale aussi vers la gauche
(seul IE n’en tient pas compte) pour que le fieldset prenne toute la
largeur aussi