Bouton radio pour les variantes

Bonjour,

J'affiche des variantes avec des boutons radio. Le problème est que les variantes s'affichent sur une même ligne.

J'aimerais que chaque variante soit sur une ligne différente donc les boutons radio seraient tous alignés à gauche.

Comment dois-je faire ?

Bonjour,

Vous pouvez faire cela avec un peu de CSS. Si vous nous donnez l'url de la page ou vous avez votre caractéristique nous pourrons être plus précis.

Le site est en local et je ne peux pas vous donner un accès à cause de la sécurité.

J'ai inclus un fichier Word qui contient un printscreen des boutons radio vu avec Firebug et la css suit en 2e page.

J'ai écris display: block; dans la css mais les labels s'affichent sur la ligne suivante au lieu de s'afficher à côté du bouton radio.

Peut-être pourrez-vous m'aider avec ça ?

Il faut surement ajouter également un float:left soit sur le label soit sur the input.

J'avais déjà essayé mais ça ne donne pas ce que ça devrait donner. Voir les 3 pages du fichier ci-joint.

Au départ, j'ai cherché à ajouter <br /> après le label dans le HTML mais je n'ai pas trouvé où l'inscrire.

Essayez voir avec cela:

.hikashop_product_characteristics_table input{ float:left; }
.hikashop_product_characteristics_table label{ display:block; }

J'ai dû ajouter un width mais les boutons radio sont décalés. Voir le document.

Vous devriez essayer de fixer le width du label:
.hikashop_product_characteristics_table label{ width:50px; }

Je ne pouvais pas mettre un width: 50px à mon label car d'autres variantes étaient plus longues. De toute façon, même avec les variantes que j'avais pour l'instant, ça ne fonctionnait pas. Le texte se plaçait sur la ligne suivante.

J'ai réussi en ajoutant un clear: both;. Voici ce que j'ai ajouté dans mon css :

.hikashop_product_characteristics_table{
width: 100%;
}
.hikashop_product_characteristics_table input{
float: left;
clear: both;
}
.hikashop_product_characteristics_table label{
display: block;
}

Merci bien de ton aide. :lol: