3

h1タグにヘッダーテキストがあります。テキストの最後に小さなアイコンが欲しいです（テキストの右側にあります）

テキストの長さは明らかに異なります。

h1 スタイルに背景画像を設定しましたが、繰り返しはありませんが、div の端に配置されています。

常にテキストの最後に並べる方法はありますか? 私が試したように、これは bg-image では実行できないと思いますか?

h1 {
background-image:url(images/quotemarks.png);
background-repeat:no-repeat;
background-position:right;
4

3 に答える 3

4

これを試して：

h1:after {
    content:url(images/quotemarks.png);
}

デモ

于 2012-07-03T14:16:12.583 に答える
2

私があなたを理解していれば、h1タグ内にimgを含むスパンを追加し、cssを使用すると、必要な結果が得られるはずです...おそらく...

HTML:

<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="end"><img src='some icon.png'/></span>
</h1>

CSS:

h1{
    display:inline-block;position:relative; padding-right:2em
}
.end{
    position:absolute; right:0; bottom:0; width:2em
}

ここでデモをチェックしてください: http://jsfiddle.net/aXjzg/2/

ここでさらに手がかりを見つけることができます: テキストの段落の右下に「フローティング」コンテンツを配置します。

于 2012-07-03T15:55:48.620 に答える
1

見出しをインラインで表示するように設定し、右側に余分なパディングを設定して背景画像を「含める」ことができます。次のようなものを試してください。

<style>
    .h1-with-icon {
    display: inline-block;
    padding: 0 15px 0 0;
    background: url('/image.gif') no-repeat top right;
        }
</style>

<h1 class="h1-with-icon">Heading</h1>

参照:例

于 2012-07-03T14:22:56.007 に答える