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

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

谢谢！

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/

如何设置整个按钮组的宽度？

2 个答案: