icônes de l'interface utilisateur jquery d'émission

Question

Bonjour, pourquoi les icônes font un br> se

Heres ce que je veux dire:

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

Source:

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

Answer 1

Si vous jetez un oeil au fichier de thème CSS JQuery UI, vous remarquerez que t

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

Ainsi, tout élément avec la classe ui-icon sera affiché comme un bloc (donc < br/> avant et après) Vous pouvez modifier ce comportement en appliquant un flotteur laissé à votre élément d'icône pour la rendre gauche de votre texte

Quelque chose comme

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

fera

Answer 2

Ma solution avait une str ucture déjà en place. Les endroits où je voulais que les icônes passent à côté du texte étaient contenus dans une div avec une classe connue. J'ai pu ajouter à mon site principal du css pour remplacer le de ui-icône "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; 
} 

Cette préséance css a bloqué l'original "display: block" css des fichiers jquery-ui et toutes mes icônes ui affichées correctement sur la même ligne.

Keith