Label en drapeau avec boutons radio

[Kzimir]

Bonjour,

J'utilise le code suivant sur un questionnaire en ligne (réalisé sur Polldaddy)

<li><input id="q_3566095_7294541" type="radio" value="7294541" name="q_3566095[choice]">
<label value="7294541" for="q_3566095_7294541">Aerospace & Defence industry</label></li>

Par contre lorsqu'un label est trop long et dépasse une ligne, je me retrouve avec une mise en page en drapeau = au lieu d'avoir l'input à gauche puis les différentes lignes du label alignées quelques pixels plus loin, j'ai l'input, la première ligne bien calée, puis les lignes suivantes calées sur le même "repère" que l'input, au lieu d'être calées sur la première ligne du label.

Savez-vous comment résoudre le problème ?
Sachant que je n'ai pas la main sur le HTML généré par le système, je ne peux toucher qu'aux CSS...

Merci !

 

[momo-fr]

On peut aborder ça de plusieurs manières, de toute façon vu comment c'est fabriqué il faut faire flotter l'input et positionner le label en block à côté, genre (en couleur pour voir les éléments) :

Les CSS de l'exemple :

ul {
	background-color: #JAUNE;
	padding: 10px;
	list-style-type: none;
	width: 200px;
}
li {
	background-color: #ROSE;
	padding: 5px;
	margin: 0px 0px 2px 0px;
}
label {
	background-color: #VERT;
	display: block;
	padding: 0px;
	margin: 0px;
}
input[type="radio"] {
	float: left;
	padding: 0px;
	margin: 0px 5px 0px 0px;
}

A toi de voir.

Tu enlèves bien sûr les couleurs qui sont là pour mon affichage, marges et padding itou c'est cosmétique.

 

[Kzimir]

Bonjour,

Merci beaucoup pour ton aide
Je viens de tester et malheureusement ça ne marche pas, il y a sûrement un conflit avec les 400 autres lignes de code CSS quelque part...

Pas grave, merci !

 

[Niconemo]

Si tu penses qu'il y a conflit, essaye d'ajouter l'ID ou la class d'un (ou d'une cascade) d'éléments parent :

#MonFormulaire ul {
    background-color: #JAUNE;
    padding: 10px;
    list-style-type: none;
    width: 200px;
}
#MonFormulaire li {
    background-color: #ROSE;
    padding: 5px;
    margin: 0px 0px 2px 0px;
}
#MonFormulaire label {
    background-color: #VERT;
    display: block;
    padding: 0px;
    margin: 0px;
}
#MonFormulaire input[type="radio"] {
    float: left;
    padding: 0px;
    margin: 0px 5px 0px 0px;
}

 

[momo-fr]

Je viens de tester un sondage avec Polldaddy, déjà sur leur site on voit très bien que les alignements sont corrects…

Ensuite le code délivré par le Js est correct et n'est pas fabriqué avec une liste mais une suite de <span> :

<div class="pds-answer">
    <span id="pds-answer7039925">
        <span class="pds-answer-group">
            <span class="pds-answer-input">
              <input id="PDI_answer31944321" class="pds-radiobutton" type="radio" name="PDI_answer7039925" value="31944321">
            </span>
           <label class="pds-input-label" for="PDI_answer31944321">
               <span class="pds-answer-span">Vert</span>
            </label>
       <span class="pds-clear"></span>
     <br>
  </span>
  <span class="pds-answer-group">
  <span class="pds-answer-group">
  <span class="pds-answer-group">
  <span class="pds-answer-group">
 </span>
</div>

Ici tu peux voir les classes CSS utilisées pour les labels et input, les styles utilisés sont corrects et il n'y a rien à retoucher.

Résultat :

Tu utilises un code perso ?

Si oui, fais comme te l'indique Niconemo pour créer tes propres styles.