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é

<div class="formulaire_spip formulaire_editer formulaire_editer_nomformulaire formulaire_editer_nomformulaire-id">
<a id="nomformulaire" name="nomformulaire"></a>
<form action="#" method="post"><div>
	<ul>
		<li class="editer_nomlabel obligatoire">
			<label for="nomlabel">Courriel</label>
			<em class="aide">#AIDER{arttitre}</em>
			<p class="explication">Explication du label</p>
			<span class="erreur">Message d'erreur</span>
			<input type="type" class="type" name="nomlabel" id="nomlabel" value="" />
		</li>
	</ul>
</div></form>
</div>

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

<ul>
	<li>
		<label />
		<input />
	</li>
	<li>
		<label />
		<em />
		<span />
		<input />
	</li>	
</ul>

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

.formulaire_spip li {
	margin: 0;
	padding: 10px 10px 10px 130px;
	clear:both;
	border-top: 1px solid #[(#GET{foncee}|couleur_eclaircir|couleur_eclaircir)];
}

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

.formulaire_spip label {
	width: 120px;
	float:left;
	margin-left:-125px; 
	text-align: left;
	vertical-align: top;
}

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

.formulaire_spip li fieldset {
	border:1px solid #888;
	background:white;
	margin-left:-125px; /* redecalage vers la gauche... IE < 8 ne le prend pas en compte */
}