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

您可以使用.width(val)设置<label>元素的宽度，如下所示：

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

You can give it a try here，您也可以添加如下的CSS规则：

#radio label { width: 200px }

You can try that out here

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>

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

2 个答案: