無法居中jQuery UI風格的單選按鈕

Question

我有一組內聯的單選按鈕。我後來他們轉換爲jQuery UI的按鈕與這行代碼：

$("input:radio").button(); 

現在，他們都好看，但他們仍然左對齊。我無法解決這個問題。我甚至嘗試使用<center>，以及兩者之間的所有內容，但它並沒有按照我的要求居中。

這裏的HTML：

<div style="display: <?php echo $visible; ?>;"> 
     <form action="php/ratingsPost.php" method="POST" id="ratingsPost"> 
         <input type="radio" class="radio" name="rate" value="1" id="1" onChange="javascript:$('#ratingsPost').submit()"/> 
         <label for="1">1</label> 
         <input type="radio" class="radio" name="rate" value="2" id="2" onChange="javascript:$('#ratingsPost').submit()"/> 
         <label for="2">2</label> 
         <input type="radio" class="radio" name="rate" value="3" id="3" onChange="javascript:$('#ratingsPost').submit()"/> 
         <label for="3">3</label> 
         <input type="radio" class="radio" name="rate" value="4" id="4" onChange="javascript:$('#ratingsPost').submit()"/> 
         <label for="4">4</label> 
         <input type="radio" class="radio" name="rate" value="5" id="5" onChange="javascript:$('#ratingsPost').submit()"/> 
         <label for="5">5</label> 
     </form> 
     </div> 

任何幫助嗎？

Answer 1

根據documentation（最後一個標籤），您可以爲您的JQueryUI組件指定不同的主題。

整個單選按鈕應與此類似：

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> 
    <span class="ui-button-text">Button Label</span> 
</button> 

所有你需要的是覆蓋類使用個人CSS樣式表自己的設計。例如：

.ui-button .ui-button-text{ 
    // personal style 
} 

不管怎麼說，使用JSBin或JSFiddle作爲JohnP一些代碼，說可能是好的，得到你的問題的一個更好的視野。快樂編碼！