如何在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。