html - 正确显示 jQuery UI 图标

Question

我一直在尝试创建包含两个图标的图标集，我试图做的是导入 jQuery UI css 文件并从示例中复制 html，但是它不起作用。

有人可以帮我在这个小提琴中制作图标看起来像这些吗？

Answer 1

您必须向容器和图标添加一些 CSS：

li.ui-state-default {
    padding: 4px 0; /* this will add some space top/bottom */
    float: left;  /* LI is a block by default so it take full width */
    /* display: inline-block; you could also use inline-block instead of float */
}

.ui-icon {
    margin: 0 4px; /* this gives the icon left/right space */
}​

演示

Answer 2

由于您失去了悬停/活动状态，因此您不会在功能上完全匹配，但您可以通过添加一些填充并将 li 设置为内联块来使其非常接近。

li{
    display:inline-block;
    margin:.25em 0 0 .25em; /*Just for spacing in the demo*/
    padding:.25em;
}

http://jsfiddle.net/RKwky/3/