Как установить фиксированную ширину кнопок внутри набора кнопок jQuery?

Question

У меня есть набор кнопок, и я хотел бы установить ширину каждой кнопки, чтобы они могли быть одинакового размера (то есть, если у меня есть 4 кнопки по 25% каждого элемента)

В основном на сайте есть таблица слева, и в этой таблице у меня есть 4 варианта. То, как оно сейчас, это то, что он не использует 100% левого столбца, поэтому выглядит плохо. Я хочу, чтобы набор кнопок занимал 100% столбца, а каждая кнопка - 25% фиксированного пространства.

Я пытался .css ('ширина') каждого элемента кнопки, но это не имеет значения.

Мой код выглядит примерно так:

 <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> элементов, чтобы получить желаемый эффект, , вы можете попробовать демо здесь .