Boutons radio et étiquette à afficher dans la même ligne

Pourquoi mes étiquettes et boutons radio ne restront pas sur la même ligne, que puis-je faire?

Voici ma forme:

Si vous utilisez la structure HTML présentée dans cette question, vous pouvez simplement faire flotter votre étiquette et entrer à gauche et ajuster le remplissage / la marge jusqu’à ce que les choses soient alignées.

Et oui, vous voudrez que votre bouton radio ait un nom de classe pour l’ancien IE. Et pour les avoir tous sur la même ligne, selon le balisage auquel je suis lié ci-dessus, ce serait comme ça:

 

signifie que votre CSS de démarrage serait quelque chose comme:

 fieldset { overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 2px 1em 0 0; } input[type=radio], input.radio { float: left; clear: none; margin: 2px 0 0 2px; } 

Ce que j’ai toujours fait, c’est juste enrouler le bouton radio dans l’étiquette …

  

Quelque chose comme ça a toujours fonctionné pour moi.

vous pouvez avoir une largeur spécifiée pour vos balises d’ entrée quelque part dans votre css .

ajoutez un class="radio" à vos boîtes radio et un input.radio {width: auto;} à votre css.

Mettez les deux à display:inline .

Hmm. Par défaut, est display: inline; et est (grosso modo) un display: inline-block; , ils devraient donc tous deux être sur la même ligne. Voir http://jsfiddle.net/BJU4f/

Peut-être une feuille de style définit-elle l’ label ou l’ input à display: block ?

Je suppose que le problème est qu’ils s’enveloppent sur des lignes séparées lorsque la fenêtre est trop étroite. Comme d’autres l’ont fait remarquer, par défaut, l’étiquette et l’entrée doivent être “display: inline;”, donc à moins que vous ayez d’autres règles de style qui changent cela, elles doivent être affichées sur la même ligne s’il ya de la place.

Sans changer le balisage, il n’y aura aucun moyen de résoudre ce problème en utilisant uniquement CSS.

Le moyen le plus simple de résoudre ce problème serait d’emballer le bouton radio et l’étiquette dans un élément de bloc, tel que p ou div , puis d’empêcher que cela ne se produise en utilisant white-space:nowrap . Par exemple:

 

J’utilise ce code et fonctionne très bien:

 input[type="checkbox"], input[type="radio"], input.radio, input.checkbox { vertical-align:text-top; width:13px; height:13px; padding:0; margin:0; position:relative; overflow:hidden; top:2px; } 

Vous voudrez peut-être réajuster la valeur supérieure (dépend de votre line-height ). Si vous ne voulez pas la compatibilité avec IE6, il vous suffit de mettre ce code dans votre page. Sinon, vous devrez append une classe supplémentaire à vos entrées (vous pouvez utiliser jQuery – ou toute autre bibliothèque – pour cela;))

J’évite toujours d’utiliser float:left mais j’utilise display: inline

 .wrapper-class input[type="radio"] { width: 15px; } .wrapper-class label { display: inline; margin-left: 5px; } 
 

Je n’ai pas pu reproduire votre problème dans Google Chrome 4.0, IE8 ou Firefox 3.5 en utilisant ce code. L’étiquette et le bouton radio sont restés sur la même ligne.

Essayez de les placer tous les deux dans une

ou définissez le bouton radio sur Inline comme le suggère le Gentleman d’élite.

Ma réponse à partir d’un article différent sur le même sujet devrait vous aider à modifier la forme de multicheckbox supprimer l’entrée des étiquettes

Remarque: Traditionnellement, l’utilisation de l’étiquette est destinée aux menus. par exemple:

         

J’avais le même problème de garder tous les boutons radio sur la même ligne. Après avoir essayé toutes les choses que je pouvais, rien ne fonctionnait pour moi, sauf ce qui suit. Ce que je veux dire, c’est simplement utiliser le tableau pour résoudre le problème en permettant aux boutons radio d’apparaître sur la même ligne.

 

Si le problème réside dans le fait que l’étiquette et l’entrée s’étendent sur deux lignes lorsque la fenêtre est trop étroite, supprimez les espaces entre elles; par exemple:

   

Si vous avez besoin d’espace entre les éléments, utilisez des espaces insécables ( & nbsp; ) ou CSS.