在標題文本的末尾放置一個圖標

我在h1標記中有一個標題文本。我想在文本的末尾有一個小圖標（所以在文本的右側）在標題文本的末尾放置一個圖標

文本的長度明顯不同。

我已經設置了h1樣式有一個背景圖像，不重複，但它把它的方式到div的邊緣。

任何方式，我可以讓它總是排隊在文本的結尾？我假設這不能像我已經嘗試過的bg-image一樣完成？

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

來源

2012-07-03 Francesca

試試這個：

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

DEMO

來源

2012-07-03 14:16:12 Engineer

這個沒有運氣:(坐不住正上方右側邊緣 – Francesca

@FrancescaHaselden你能發佈的一個屏幕截圖？可能我不明白你的問題。 – Engineer

@FrancescaHaselden：你（必須）使用哪個瀏覽器？ afaik IE <9在僞類中存在一些問題 – cypherabe

你可以設置你的標題，以直列顯示和設置在右側微胖「遏制」的背景圖像。三分球是這樣的：

<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>

參見：Example

來源

2012-07-03 14:22:56

沒有這個運氣:(仍然坐在右邊 – Francesca

你可以更具體嗎？如果你設置h1的顯示（「display：inline-block」），將不再佔用頁面上的整行，然後，您添加的額外填充將會將圖像移動到文本的右側。 –

已更新，並且清晰度爲 –

如果我理解你，加入跨度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/

更多的線索可以在這裏找到： Place 'floating' contents at the bottom right of a paragraph of text

來源

2012-07-03 15:55:48 zaf

在標題文本的末尾放置一個圖標

回答

相關問題