[Résolu]Label sur plusieurs lignes

Salut,

J'ai cherché sur google et aussi sur Alsacréation. J'ai une série de radio button à gauche et leur label est situé à droite. Il arrive parfois que le label est trop long et se retrouve sur plusieurs lignes. Le retour à la ligne est aligné avec le radio button. J'aimerais savoir s'il est possible de l'aligner avec le texte. Je joins une image avec en haut l'affichage actuel et en bas ce que j'aimerais avoir. Je me demandais si ce genre de chose est possible avec label.

Merci


Modifié par Nambew (12 Mar 2008 - 21:33)

Une piste:

[b][#black]HTML[/#][/b]

<form action="">
	<p>
		<label>
			<input type="radio" value="foo" name="bar" />
			Lorem ipsum dolor sit amet.
		</label>
	</p>
</form>


[b][#black]CSS[/#][/b]

label {display:block; position:relative; padding-left:25px}
input {position:absolute; left:0}

Bonjour nanbew et bienvenue,

Sauf erreur de ma part le label est là pour annoncer l'élément qui lui est couplé (label explicite).

Dans l'exemple donné même si je n'ai pas le code je suppose que celui-ci est après le bouton radio dans le flux, ce qui n'est pas le mieux.

Une solution si le rendu graphique doit absolument être conservé est d'éventuellement passer par un flottant à droite ce qui remets le label en première position dans le flux.
Modifié par knarf (11 Mar 2008 - 22:27)

Désolé d'avoir oublié le code. J'ai utilisé la solution proposée par Benjamin et ça fonctionne bien sous Firefox. Un léger problème de marge sous IE par contre. J'ai utilisé le hack !important pour corriger.

Merci pour la solution

#putois_quiz label
{
	display:block; 
	position:relative; 
	padding-left:50px;
}

.putois_radio
{
	position:absolute;
	left:0;
	margin-left:25px !important;
	margin-left:-25px;
}

<form method="post">
        <label><input class="putois_radio" type="radio" name="answer" value="1" id="answer1"> <!-- ANSWER1 --></label><br>
        <label><input class="putois_radio" type="radio" name="answer" value="2" id="answer2"> <!-- ANSWER2 --></label><br>
        <label><input class="putois_radio" type="radio" name="answer" value="3" id="answer3"> <!-- ANSWER3 --></label><br>
        <label><input class="putois_radio" type="radio" name="answer" value="4" id="answer4"> <!-- ANSWER4 --></label><br>
        <input type="submit" name="send" value="Confirmer">
    </form>