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中使用。

Answer 2

我遇到了同样的问题，我只是在-jQuery UI - icon alignment

的帮助下解决了

他们的关键是向您赋予ui-icon类的元素添加 float：left; （或向右）。

这是一个带有“打印”按钮的JSFiddle，而您的示例代码带有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上的按钮测试了相同的代码，它们也无法正常工作。我用Google搜索了jQuery UI图标旁边的文本变体，这是第一个结果。我还发现了这个https://forum.jquery.com/topic/how-to-make-jquery-ui-icons-align-with-text，它引用了这个How to use jQuery UI icons without buttons?，原始的提问者放弃了，而最终直接引用了图像文件。

然后我坚持下去，幸好找到了第一条记录。

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

2 个答案: