在标题文本的末尾放置一个图标

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

在标题文本的末尾放置一个图标

回答

相关问题