Geek asks and answers

Show jQuery ui-icon in line with text

My html has the following:

<div id="flash_message" class="ui-state-highlight ui-helper-hidden">
    <p>
        <span id="flash_message_content">Hey, Sailor!</span>
        <span id="flash_message_button" class="ui-icon ui-icon-circle-minus"></span>
    </p>
</div>

Classes from the jQuery user interface. My goal is to display a message (in this case, “Hey sailor!”), And then immediately next to it is a circle minus sign. Then I bind the handler to the icon; this handler allows the user to hide the message.

All this works fine, except that the range is flash_message_buttondisplayed as a block. The icon appears on the next line of the message, not next to it. If I include the "display: inline" inline-style command, the icon disappears completely (it is still in the DOM, but it displays 0px by 0px).

What needs to be changed to make the icon appear right next to the message?

+4
source
2

"display: inline-block;"

flash_message_button .

, , , , , , , .

: : ; IE, DOCTYPE.

+9

, - jQuery UI -

float: left; ( ) , ui-icon.

JSFiddle Print float- http://jsfiddle.net/fgpjx5rc/

:

  <button>
    <span class="ui-icon ui-icon-print" style="float: left;"></span>
    Print
  </button>

- jQuery UI . , . , . . Firefox CSS, . ( ). - jQuery UI, http://jqueryui.com/button/#icons, . jquery ui, . https://forum.jquery.com/topic/how-to-make-jquery-ui-icons-align-with-text, . jQuery ? .

, .

0

More articles:


All Articles