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

【问题标题】：Display JQuery ui-icon inline with text显示与文本内联的 JQuery ui-icon
【发布时间】：2012-04-11 03:03:11
【问题描述】：

我的 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 x 0px 呈现）。

我应该进行哪些更改以强制图标显示在消息旁边？

【问题讨论】：

标签： jquery html jquery-ui

【解决方案1】：

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

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

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

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

【讨论】：

是的，我确实尝试过 inline-block（在 Chrome 上测试），它似乎与按钮正在接收的继承块显示具有相同的效果 - 换句话说，它被强制到下一个“行”而不显示在文本旁边。
如果没有更多信息，很难知道 css 出了什么问题，但我会尝试弄清楚允许 span 正确显示的 css 规则是否被 javascript 中的其他地方覆盖。显然，Chrome 的调试器（右键单击并使用“检查元素”）对此非常有帮助。
添加“display: inline-block;”后我也会尝试添加“空白：nowrap;”连同“溢出：可见；”查看该跨度是否换行到下一行。如果是换行，则应调整父元素的宽度（在您的示例中为
标记）。

【解决方案2】：

我遇到了同样的问题，我只是在 -jQuery UI - icon alignment 的帮助下解决了这个问题

他们的关键是将 float: left;（或 right）添加到您赋予类 ui-icon 的元素中。

这是一个带有打印按钮的 JSFiddle，以及带有浮点数的示例代码- 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?，原来的提问者放弃了，最后直接引用了图像文件。

然后我坚持下去，谢天谢地找到了第一个条目。

【讨论】：