javascript - 如何设置整个按钮集的宽度？

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()​

正如大家所看到的，我试图让整个按钮集填充 500 像素的宽度，但是使用这个样式属性似乎没有做任何事情。如何将整个按钮集的宽度设置为一些像素？

谢谢！

Answer 1

尝试：

$('#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;
});

Answer 2

我相信适用于可变数量按钮的最佳跨浏览器兼容解决方案是将其包装在表格中：http: //jsfiddle.net/DPNc6/1/