Réglage de la largeur des boutons radio lors de l'utilisation jQueryUI

Question

J'utilise des boutons radio jQuery UI, et ne peut pas trouver comment les mettre tous à être une largeur fixe.

Le code J'utilise est:

<script type="text/javascript">
    $(document).ready(function () {
        $("#radio").buttonset();
    });
</script>

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">A</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

J'utilise jQuery pour la première fois, et ont peu de CSS ou javascript expérience. J'ai essayé toutes sortes de combinaisons bizarres pour essayer de spécifier une largeur fixe pour les boutons sans perdre le style jQuery UI, mais ai pas eu de chance.

Toute aide serait appréciée.

Answer 1

Vous pouvez régler la largeur des éléments de <label> il est l'affichage en utilisant .width(val) comme ceci:

$("#radio").buttonset().find('label').width(200);

Vous pouvez essayer ici , sinon, vous pouvez simplement ajouter une règle CSS comme ceci:

​#radio label { width: 200px }​

Vous pouvez essayer ici .

Answer 2

Les œuvres ci-dessous pour les boutons radio normales et celles avec des icônes seulement

.myradiolables
{
 width: 200px;
 height: 20px;
}

<div id="radio">
<input type="radio" id="radio1" name="radio" /><label class="myradiolabels" for="radio1">A</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label class="myradiolabels" for="radio2">Choice 2 - long long</label>
<input type="radio" id="radio3" name="radio" /><label class="myradiolabels" for="radio3">Choice 3</label>
</div>