Question

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

文字长度明显不同。

我已经将h1样式设置为具有背景图像，没有重复，但是它将它放到了div的边缘。

任何方式我都可以在文本的最后总是排队？我认为这不能用像我试过的bg图像那样完成吗？

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

Answer 1

试试这个：

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

DEMO

Answer 2

如果我理解你，在h1标签内添加带有img的span并使用一些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

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>

请参阅：Example

在标题文本的末尾添加一个图标

3 个答案: