如何設置整個按鈕集的寬度？

Question

請在此處考慮下面的代碼，也給本琴：http://jsfiddle.net/DPNc6/

HTML：

<div style="width:500px" id="radio"> 
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> 
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
</div>​ 

JS;

$('#radio').buttonset()​ 

大家都可以看到，我試圖讓整個buttonset填補500像素的寬度，但使用這種風格的屬性似乎沒有做任何事情。如何將整個按鈕集的寬度設置爲一定數量的像素？

謝謝！

Answer 1

我認爲最好的跨瀏覽器兼容的解決方案這將工作的可變數量的按鈕是將其包裝在一張表中：http://jsfiddle.net/DPNc6/1/

Answer 2

嘗試：

$('#radio input').css('width', '30%'); 

它可能會溢出了一下，由於填充和利潤，所以你可能需要做一些修正：

var $inputs = $('#radio input'); 
var w = (500/3) - ($inputs.length * ($inputs.css('padding-left') + 
             $inputs.css('padding-right'))); 
// I'm assuming the buttons are still `display: inline` so let's position them 
// absolutely and give them some margin. 
var margin = 5; 
w -= ($inputs.length - 1) * margin; 

var l = 0 - margin; 
$('#radio').css('position', 'relative'); 
$inputs.each(function() { 
    $(this).css({ 
    'width' : w, 
    'position' : 'absolute', 
    'left' : l 
    }); 
    l += w + m; 
});