如何在jQuery buttonset中设置按钮的固定宽度？

我有一个按钮集，并希望设置每个按钮的宽度，以便它们可以是相同的大小（即，如果我有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>

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

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

$（函数（）{$（“#任务排序”）.buttonset（）；}）；
全部的
残缺的
完整的

您可以这样做：

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

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

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

在html之后，如下所示：

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

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

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

全部的
残缺的
完整的

---

然后，您只需设置新创建的

元素的宽度即可获得您想要的效果。

谢谢Nick，我怀疑任何答案都不能比这个更好。又短又甜，正是我想要的！