Comment puis-je faire de multi-ligne, verticale et horizontale des étiquettes pour les boutons radio dans les Formulaires HTML avec CSS?
En supposant que le balisage suivant:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
Comment puis-je style de bouton radio étiquettes de sorte qu'ils ressemblent à la suite dans la plupart des navigateurs (IE6+, FF, Safari, Chrome:
OriginalL'auteur Patrick Klingemann | 2009-05-26
Vous devez vous connecter pour publier un commentaire.
Je crois que cela répond à tout. Vous n'avez pas mentionné qu'il doit valider, cependant, j'ai donc utilisé le inline-block (-moz-inline-box) à l'écran. L'un de mes favoris, en fait.
Voici une copie de travail
Testé dans Safari 3, FireFox 3, et IE7.
Parfait! BTW: Pas besoin de le display: inline-block sur le <input>.
OriginalL'auteur
À l'aide de la balise suivante et css, j'ai été en mesure de produire des étiquettes de ligne qui ne sont pas repliés sous le bouton radio:
cependant, j'ai été incapable d'utilisation:
au centre de l'étiquette à la verticale sur le bouton radio, même lorsque l'application d'une largeur (à la fois des suggestions dans Dmitri Farkov de réponse. Mon but principal était d'empêcher emballage sous le bouton radio, de sorte que cette solution sera très bien pour le moment.
Ce problème ne semble pas se produire si vous utilisez le balisage de la question d'origine.
Après un tas d'examens, ma réponse ci-dessus semble être la meilleure solution. Vertially centrée sur les étiquettes ne sont pas vraiment souhaitable pour un texte long. Imaginez texte de quelques paragraphes. Vous voulez vraiment le bouton radio centrée verticalement sur plusieurs paragraphes? J'en doute. Je suis la sélection de ce que la réponse.
OriginalL'auteur
Depuis que j'ai demandé comment gérer vraiment long étiquettes ci-dessus, et j'ai finalement résolu moi-même. Voici la solution pour mon problème. Peut-être il pourrait vous aider?
OriginalL'auteur
Faire d'entrée et de l'étiquette à la fois
Définir la largeur de l'étiquette et de l'entrée.
appliquer
à tous les li.
dasha, quel est l'avantage de le faire? Juste curieux.
Dimitri, c'est à dire si le flotteur est fixé sur des boutons radio, ils collent vers le haut du bloc. Je ne suis pas sûr, mais probablement vous aurez à envelopper des boutons radio dans les travées et les faire flotter au lieu de cela, non?
overflow:hidden et clair:les deux réagissent différemment à mon avis, et clair à la fois est nécessaire pour maintenir le li de passer au-dessus les uns des autres. Pour assurer une bonne vertical-alignement, je pense que li a avoir verticale aligner sur elle, non pas l'étiquette de mon erreur.
+1 je ne comprends pas pourquoi ce n'était pas choisi la solution retenue puisque c'est concis et plus.
OriginalL'auteur