Make ui-icon appear on same line as other text within <li>

Question

I'm bad with CSS, and I'm trying to get the ui-icon on the same line as the text in a LI.

<ul>
    <li class="ui-state-default">
        <span>Hello</span>
        <span class="ui-icon ui-icon-close"></span>
    </li>
</ul>

Normally text doesn't do that within a li, so I think it's something with the ui-icon css, but I couldn't find what was causing it.

Solution

Further to my question comment above, I've found this in my jQuery-ui CSS, assuming that's what you're using:

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

Changing (or overriding) the display: block using display: inline-block should allow the icon to appear on the same line

Comments

[EvilAmarant7x]

Changing it to display: inline made the icon disappear for some reason, but inline-block worked. jsfiddle.net/EvilAmarant7x/HWgkx/2