显示与文本内联的JQuery ui-icon

Question

我的html中有以下内容:

<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>

这些类来自JQuery UI.我的目标是显示消息(在这种情况下,"嘿,水手!")然后,在它旁边,显示圆圈减号图标.然后我将处理程序绑定到图标; 该处理程序允许用户隐藏消息.

这一切都很好,除了跨度flash_message_button显示为块.图标显示在消息的下一行,而不是旁边.如果我包含一个内联样式命令"display:inline",那么该图标将完全消失(它仍然在DOM中,但是被0px渲染为0px).

我应该做些什么改变才能强制显示消息旁边的图标？

Answer 1

您是否尝试将其设置为"display:inline-block;" ？

这将允许您为span flash_message_button定义宽度和高度,并允许您以内联方式显示它.

我不确定这是否正是您正在寻找的,但鉴于您所描述的问题,我肯定会尝试这样做.

注意:display:inline-block; 除非您有正确的DOCTYPE声明,否则将无法在许多版本的IE中使用.