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

【问题标题】：Putting an icon at the end of header text在标题文本的末尾放置一个图标
【发布时间】：2012-07-03 23:55:39
【问题描述】：

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

文本长度明显不同。

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

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

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

【问题讨论】：

标签： html css image background

【解决方案1】：

试试这个：

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

DEMO

【讨论】：

@FrancescaHaselden 你能发一张截图吗？可能我不明白你的问题。
@FrancescaHaselden：您（必须）使用哪种浏览器？ afaik IE

【解决方案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/

更多线索可以在这里找到： Place 'floating' contents at the bottom right of a paragraph of text

【讨论】：

【解决方案3】：

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

<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

【讨论】：

您能说得更具体些吗？如果您设置了 h1 的显示（“display: inline-block”），它将不再占据页面上的整行。然后，您添加的额外填充会将图像移动到文本的右侧。
为了清楚起见，更新了一个示例
嗨。我将代码放在您的帖子中。图标位于与以前相同的位置（在 div 的最边缘，尽可能远。）因此与以前没有任何变化。对填充的任何更改都不会移动它。它仍然在非常遥远的尽头，而且还没有像希望的那样接近文本的结尾。
你有这方面的例子，我可以看看吗？如果是这样，我可以提供解决问题所需的任何调整。
很遗憾我没有上传任何版本（NDA 禁止这样做）。无论如何感谢您的帮助:(