jQuery的ButtonSet尺寸发出

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/