jquery-ui - 使用 jQueryUI 时设置单选按钮的宽度

Question

我正在使用 jQuery UI 单选按钮，但找不到如何将它们全部设置为固定宽度。

我正在使用的代码是：

<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>

我是第一次使用 jQuery，并且几乎没有 CSS 或 javascript 经验。我尝试了各种奇怪的组合来尝试为按钮指定一个固定的宽度而不丢失 jQuery UI 样式，但是没有运气。

任何帮助，将不胜感激。

Answer 1

<label>您可以像这样设置它显示的元素的宽度.width(val)：

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

你可以在这里试一试，或者你可以像这样添加一个 CSS 规则：

​#radio label { width: 200px }​

你可以在这里试试。

Answer 2

以下适用于普通单选按钮和仅带有图标的单选按钮

.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>