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

Question

我在 h1 标签中有一个标题文本。我想在文本的末尾有一个小图标（所以在文本的右侧）

文本的长度明显不同。

我已将 h1 样式设置为具有背景图像，不再重复，但它会将其置于 div 的边缘。

有什么办法可以让它始终在文本末尾排列？我假设这不能像我尝试过的那样用 bg-image 完成？

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

Answer 1

试试这个：

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

演示

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

更多线索可以在这里找到： 将“浮动”内容放在一段文本的右下角

Answer 3

您可以将标题设置为内联显示，并在右侧设置额外的填充以“包含”背景图像。Trey 是这样的：

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

请参阅：示例