Выдача иконок в jquery UI

Question

Здравствуйте, почему значки делают бр> Сам

Вот что я имею в виду:

альтернативный текст http://i30.tinypic.com/23tgkms.png

Источник:

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

Answer 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

сделает

Answer 2

Мое решение уже имело некоторую структуру.Места, где я хотел, чтобы значки располагались рядом с текстом, содержались в div с известным классом.Я смог добавить на свой основной сайт css, чтобы переопределить значок «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 заблокировал исходный css "display: block" из файлов jquery-ui и все мои значки ui, правильно отображаемые в одной строке.

Keith