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

You can give it a try here ，或者您也可以只添加如下 CSS 规则:

​#radio label { width: 200px }​

You can try that out here .