jquery UI图标问题

时间:2010-07-10 15:27:28

标签: jquery css user-interface

您好,为什么图标会执行br>本身

这就是我的意思:

alt text http://i30.tinypic.com/23tgkms.png

来源:

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

2 个答案:

答案 0 :(得分:14)

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

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

因此,具有类ui-icon的任何元素都将显示为块(因此&lt; br /&gt;之前和之后)您可以通过向图标元素应用浮动来更改此行为你的文字左侧

这样的东西
<span class="ui-icon ui-icon-bullet" style="float:left;"></span> Hello

会做

答案 1 :(得分:0)

我的解决方案已经有了一些结构。我希望图标在文本旁边流动的地方包含在具有已知类的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文件的原始“display:block”css,并且我的所有ui-icons都在同一行上正确显示。

基思