jquery UI icons issue

Hello, why does the icons do a br> itself开发者_JAVA百科

Heres what i mean:

Source:

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

If you take a look at the JQuery UI CSS theme file, you will notice that

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

So any element with the class ui-icon will be displayed as a block (therefore a <br /> before and after) You can change this behavior by applying a float left to your icon element to make it left of your text

Something like

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

will do

My solution had some structure already in place. The places I wanted the icons to flow next to the text were contained in a div with a known class. I was able to add to my main site the css to override the ui-icon's "display:block" to "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;
}

This css precedence blocked the original "display: block" css from the jquery-ui files and all of my ui-icons displayed correctly on the same line.

Keith