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>

クラスはJQueryUIからのものです。私の目標は、メッセージ（この場合は「Hey、Sailor！」）を表示し、そのすぐ横に円マイナスアイコンを表示することです。次に、ハンドラーをアイコンにバインドします。そのハンドラーにより、ユーザーはメッセージを非表示にできます。

flash_message_buttonスパンがブロックとして表示されることを除いて、これはすべて正常に機能します。アイコンは、メッセージの横ではなく、メッセージの次の行に表示されます。インラインスタイルコマンド「display：inline」を含めると、アイコンは完全に消えます（DOMには残りますが、0px x 0pxでレンダリングされます）。

メッセージのすぐ横にアイコンを表示するには、どのような変更を加える必要がありますか？

4

2 に答える 2

9

「display：inline-block;」に設定してみましたか。？

これにより、スパン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 の Web サイト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 に答える