jQuery UI iconos de emisión

Question

Hola, ¿por qué los iconos hacen un br> sí

Esto es lo que quiero decir:

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

Fuente:

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

Answer 1

Si echas un vistazo al archivo de tema JQuery UI CSS, notarás que t

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

lo tanto, cualquier elemento con la clase ui-icon se mostrará como un bloque (por lo tanto, un < br/> antes y después) Puede cambiar este comportamiento mediante la aplicación de un flotador dejó a su elemento icono para hacer que dejó de su texto

Algo así como

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

hará

Answer 2

Mi solución tenía algún str estructura ya está en su lugar. Los lugares donde quería que los iconos fluyeran al lado del texto estaban contenidos en un div con una clase conocida. Yo era capaz de añadir a mi sitio principal el css para anular el de ui-icono "display: block" a "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; 
} 

Esta precedencia de css bloqueó el css "display: block" original de los archivos jquery-ui y todos mis íconos de ui se muestran correctamente en la misma línea.

Keith