jQuery 단추 세트 내의 단추에 고정 폭을 설정하는 방법은 무엇입니까?

Question

버튼 세트가 있고 각 버튼의 너비를 동일하게 설정할 수 있습니다 (즉 각 요소가 25 % 인 버튼이 4 개있는 경우)

기본적으로 사이트에는 표가 있습니다 왼쪽에는 테이블에 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> 요소의 너비를 설정하여 효과를 얻으세요. 원하는대로, you can try out a demo here.