Question

我正在使用jQuery UI buttonset，如下所示

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

$(document).ready(function () {
    $("#radioSet").buttonset().find('label').css({ 'width': '100px', 'height': '100px'});
});

按钮设置布局存在上述代码的问题（不规则放置）。布局工作正常如果我减少文本长度（或增加宽度），使文本适合按钮而不需要换行。文本换行似乎导致了这个问题。

如何在按钮组中实现相同大小的按钮？

Answer 1

如果您想动态执行此操作，请执行以下操作：

$(document).ready(function () {
    $("#radioSet").buttonset();

    var longest = 0;
    $("#radioSet .ui-button").each(function(){
        if ($(this).width() > longest)
            longest = $(this).width();
    }).each(function(){
        $(this).width(longest);
    });
});

以下是它的实际应用：http://jsfiddle.net/b77DS/2/

jQuery ButtonSet维度问题

1 个答案: