5

我的 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）。

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

4

2 回答 2

9

您是否尝试将其设置为“显示：内联块；” ?

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

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

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

于 2012-04-11T03:38:48.987 回答
1

我有同样的问题，我只是在 - jQuery UI - 图标对齐的帮助下解决了这个问题

他们的关键是添加float: left; （或右）到您赋予类 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，它提到了这个如何使用没有按钮的 jQuery UI 图标？原来的提问者在那里放弃了，只是直接引用了图像文件。

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

于 2019-04-09T18:46:14.707 回答