jquery - 显示与文本内联的 JQuery ui 图标

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。我的目标是显示消息(在本例中为“嘿，水手!”)，然后紧挨着它显示圆圈减号图标。然后我将一个处理程序绑定(bind)到图标；该处理程序允许用户隐藏消息。

这一切都很好，除了 span flash_message_button 显示为一个 block 。该图标出现在消息的下一行，而不是旁边。如果我包含内联样式命令“display: inline”，图标将完全消失(它仍在 DOM 中，但呈现为 0px x 0px)。

我应该做哪些更改才能强制图标显示在消息旁边？

Answer 1

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

这将允许您为 span flash_message_button 定义宽度和高度还可以让您内联显示它。

我不确定这是否正是您正在寻找的东西，但考虑到您所描述的问题，我肯定会尝试这样做。

注意:显示:内联 block ；除非您有正确的 DOCTYPE 声明，否则在许多版本的 IE 中都无法使用。