使用jQueryUI設置單選按鈕的寬度

Question

我正在使用jQuery UI單選按鈕，並找不到如何將它們全部設置爲固定寬度。

我正在使用的代碼是：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#radio").buttonset(); 
    }); 
</script> 

<div id="radio"> 
    <input type="radio" id="radio1" name="radio" /><label for="radio1">A</label> 
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label> 
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
</div> 

我使用jQuery的第一次，並沒有什麼CSS或JavaScript的經驗。我嘗試過各種奇怪的組合，嘗試爲按鈕指定一個固定寬度，而不會失去jQuery UI風格，但沒有運氣。

任何幫助，將不勝感激。

Answer 1

您可以設置它使用.width(val)這樣顯示<label>元素的寬度：

$("#radio").buttonset().find('label').width(200); 

You can give it a try here，或者你可以只添加CSS規則是這樣的：

​#radio label { width: 200px }​ 

You can try that out here。

Answer 2

以下工作正常單選按鈕和那些帶圖標只有

.myradiolables 
{ 
width: 200px; 
height: 20px; 
} 

<div id="radio"> 
<input type="radio" id="radio1" name="radio" /><label class="myradiolabels" for="radio1">A</label> 
<input type="radio" id="radio2" name="radio" checked="checked" /><label class="myradiolabels" for="radio2">Choice 2 - long long</label> 
<input type="radio" id="radio3" name="radio" /><label class="myradiolabels" for="radio3">Choice 3</label> 
</div>