Discussion :

[ben.IT]

Salut à tous, je rencontre un problème de positionnement avec dans un fomulaire sur les radio bouttons et le texte associé :
Lorsque le texte associé au radio boutton atteind une certaine longueur, il va à la ligne et les lignes suivantes ne sont pas alignés avec la premiere (cf screenshot).
Comment faire pour que les lignes 2,3,4,5 commencent au même niveau que la première ?

Quelqu'un peut m'aider ?
merci d'avance,
Ben

Le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input id="xx" class="radio" type="radio" >
loremLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nunc nec urna euismod viverra at id urna. Duis vestibulum fermentum ullamcorper. Mauris lacus nunc, consectetur nec iaculis at, elementum et eros.

[Invité]

Bonjour,
2 solutions :
/* solution 1 */

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.p-radio1 { width:200px; }
.p-radio1 { position:relative; padding-left:25px; }
.p-radio1 input { position:absolute; left:0; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p class="p-radio1">
<input id="xx" class="radio" type="radio" >
loremLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nunc nec urna euismod viverra at id urna.
</p>

/* solution 2 */

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.p-radio2 { width:225px; }
.p-radio2 { }
.p-radio2 input { float:left; }
.p-radio2 span { width:200px; display:inline-block; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<p class="p-radio2">
<input id="xx" class="radio" type="radio" >
<span>
	loremLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nunc nec urna euismod viverra at id urna.
</span>
</p>

[ben.IT]

ok, merci pour tes solutions.
J'ajoute la possibilité de faire un tableau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.table_radio{}
.table_radio tr{display: block;	/*margin-bottom: 15px;*/}
.table_radio tr td{	vertical-align: top;border:none;}
.table_radio tr.tr_separator {height: 12px;}

@+
ben