在自定义工具栏中使用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;
    }

它可以工作但是当我在一个hrefs上设置填充或大小时，我没有在按钮上得到一个漂亮的居中图标，因为它在图标文件中显示图标和周围图标的一部分。

有可能纠正这个问题吗？

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/

它看起来需要一个单独的正确尺寸范围，以防止图标文件显示周围的图标（精灵）。