在自定义工具栏中使用 jquery UI 主题答案

【问题标题】：use jquery UI theme in custom toolbar在自定义工具栏中使用 jquery UI 主题
【发布时间】：2012-07-29 11:09:01
【问题描述】：

我想在我自己的工具栏中使用 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;
    }

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

这个问题能改吗？

【问题讨论】：

标签： css jquery-ui

【解决方案1】：

您可以使用边距而不是填充。这将使图标保持居中。

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

【讨论】：

【解决方案2】：

我在这里找到了答案：

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

看起来它需要一个大小合适的单独跨度来防止图标文件显示周围的图标（精灵）。

【讨论】：