如何在jQuery按钮集内的按钮上设置固定宽度？

Question

我有一个按钮设置，并希望设置每个按钮的宽度，使他们可以是相同的大小（即如果我有4个按钮的25％，每个元素）

基本上该网站有一个表在左边，并在该表中我有4个选项。现在它的方式是不使用左列的100％，所以看起来很糟糕。我期望让按钮设置占据列的100％，并且每个按钮共享25％的固定空间。

我试过.css（'width'）每个按钮元素，但它没有区别。

我的代码看起来是这样的：

<script type='text/javascript'> 
    $(function() { $("#task-sort").buttonset(); }); 
</script> 

<div id='task-sort'> 
    <input type='radio' name='task-sort' id='sort_all' checked><label for='sort_all'>All</label> 
    <input type='radio' name='task-sort' id='sort_inc'><label for='sort_inc'>Incomplete</label> 
    <input type='radio' name='task-sort' id='sort_com'><label for='sort_com'>Completed</label> 
</div> 

Answer 1

你可以这样说：

$("#task-sort").buttonset().find('label').css('width', '25%');​​​​​​​​​​​​​​​​ 

.buttonset()后你的HTML看起来像这样：

<div id="task-sort" class="ui-buttonset"> 
    <input type="radio" name="task-sort" id="sort_all" checked="" class="ui-helper-hidden-accessible"> 
    <label for="sort_all" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="true" role="button" aria-disabled="false"><span class="ui-button-text">All</span></label> 
    <input type="radio" name="task-sort" id="sort_inc" class="ui-helper-hidden-accessible"> 
    <label for="sort_inc" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Incomplete</span></label> 
    <input type="radio" name="task-sort" id="sort_com" class="ui-helper-hidden-accessible"> 
    <label for="sort_com" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false"><span class="ui-button-text">Completed</span></label> 
</div> 

然后你只需要在这些新创建的<label>元素上设置宽度即可获得效果你想要，you can try out a demo here。