0

ここでこのコードを検討してください。また、このフィドルも指定されています: 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 の幅で埋めようとしていますが、このスタイル属性を使用しても何も起こらないようです。ボタンセット全体の幅をピクセル数に設定するにはどうすればよいですか?

ありがとう！

4

2 に答える 2

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;
});
于 2012-09-06T18:39:35.787 に答える
1

さまざまな数のボタンで機能するクロスブラウザー互換性のある最良のソリューションは、それをテーブルにラップすることだと思います：http://jsfiddle.net/DPNc6/1/

于 2012-09-06T18:41:08.640 に答える