jquery UI图标问题答案

【问题标题】：jquery UI icons issuejquery UI图标问题
【发布时间】：2011-03-14 06:48:16
【问题描述】：

你好，为什么图标做一个 br> 自己

这就是我的意思：

来源：

.ui-icon-bullet { background-position: -80px -144px; }
    <span class="ui-icon ui-icon-bullet"></span> Hello

【问题讨论】：

【解决方案1】：

如果您查看 JQuery UI CSS 主题文件，您会注意到

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

因此，ui-icon 类的任何元素都将显示为一个块（因此之前和之后都有一个
）您可以通过向图标元素应用向左浮动以使其位于文本左侧来更改此行为

类似

<span class="ui-icon ui-icon-bullet" style="float:left;"></span> Hello

会的

【讨论】：

【解决方案2】：

我的解决方案已经有了一些结构。我希望图标在文本旁边流动的位置包含在具有已知类的 div 中。我能够将 css 添加到我的主站点以将 ui-icon 的“display:block”覆盖为“display:inline-block”

HTML

<div class="sectionActions">
    Section Names <span class="ui-icon ui-icon-close"></span>
</div>

CSS

.sectionActions .ui-icon
{
    display: block-inline;
}

此 css 优先级阻止了 jquery-ui 文件中的原始“显示：块” css，并且我的所有 ui 图标都正确显示在同一行。

基思

【讨论】：