如何讓jQuery UI按鈕具有相同的寬度，圖標的間距與右側的距離相同？

我有這樣的代碼：如何讓jQuery UI按鈕具有相同的寬度，圖標的間距與右側的距離相同？

<div class="ui-widget"> 
    <ul style="list-style-type: none; padding-left: 0;" id="menuList"> 
     <li> 
     <a href="/C2D" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button"> 
      <span class="ui-button-text">test test test</span> 
      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span> 
     </a> 
     </li> 
     ... 
     ... 
     <li> 
     <a href="/C2E" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button"> 
      <span class="ui-button-text">test</span> 
      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span> 
     </a> 
     </li> 
     ... 
     ... 
     <li> 
     <a href="/C2F" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button"> 
      <span class="ui-button-text">test test</span> 
      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span> 
     </a> 
     </li> 
    </ul> 
</div>

我的CSS是這樣的：

#menuList li a.ui-button span.ui-button-text { padding-top: 0; padding-bottom: 0; } 
#menuList a.ui-button { margin-bottom: 5px; height: auto }

結果是一些好看的按鈕鏈接。

但是所有的按鈕都是不同的寬度。我想要做的是讓它們具有相同的寬度（例如200px），並使右側的指針圖標全部垂直排列。東西一樣，在下面的鏈接：

Flyout menu

是否有某種方式，我可以改變CSS，使我的鏈接看起來像這樣？

來源

2012-02-27 Jessica

.ui-button { width: 200px; }

我不太明白你的問題是什麼。

來源

2012-02-27 08:55:24

謝謝。但是當我這樣做時，所有的文字都是以文字爲中心的。我希望文本是有道理的。 – Jessica 2012-02-27 08:58:59

添加文本對齊：左側;對這個班級來說，這個問題不是固定的嗎？ – 2012-02-27 09:02:48

感謝大家。現在很好用。 – Jessica 2012-02-27 09:05:31

#menuList a.ui-button { margin-bottom: 5px; height: auto; width:200px; }

來源

2012-02-27 09:00:24

謝謝，但有沒有一種方法可以使文本不是都排在中間？ – Jessica 2012-02-27 09:02:33

我想Tim D'Haene給了你答案。 – 2012-02-27 09:05:22

如何讓jQuery UI按鈕具有相同的寬度，圖標的間距與右側的距離相同？

回答

相關問題