在自定義工具欄中使用jQuery UI主題

Question

我想在我自己的工具欄中使用jQuery UI主題，而不使用jQuery本身。

我：

<div class="toolbar ui-widget-header ui-corner-all"> 
    <a href="#" class="ui-icon ui-icon-circlesmall-close">close</a> 
    <a href="#" class="ui-icon ui-icon-circlesmall-plus">open</a> 
</div> 

CSS：

.toolbar { 
    height:28px; 
} 
    .toolbar a { 
     display:inline-block; 
     height:24px; 
     width:24px; 
    } 

它的工作原理，但是當我設置填充或大小的一個HREF中我沒有得到一個不錯的中心上的按鈕，因爲圖標它會在圖標文件中顯示圖標和周圍圖標的一部分。

是否有可能糾正這個問題？

Answer 1

您可以使用餘量而不是填充。這將保持圖標居中。

.toolbar { 
    height:28px; 
} 
.toolbar a { 
    display:inline-block; 
    height:16px; 
    width:16px; 
    margin:6px; 
} 

Answer 2

我找到了答案在這裏：

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

它看起來它需要合適大小的單獨的跨度，以防止圖標文件顯示周圍的圖標（精靈）。