html - 在我的 H1 文本旁边放一张图片，不管文本的宽度是多少

Question

正如您在下图中看到的，我在 H1 文本的头部放置了一个箭头图像。我通过使用 margin right 和 top 来做到这一点。它正在工作，但问题是，如果我修改 H1 文本，那么我将不得不再次使用边距。有没有办法不管文本的宽度是多少，都将箭头放在 H1 文本的末尾？非常感谢，

<div class="block">
    <h1><span>H1 HEADER EN UIUIUIU MOTS</span> KKJKJJKJJKJKJdJKJJK</h1><img class="arrow" src="images/arrow-down.png" alt="arrow">
  </div>
  <div class="block clear fish shadow">
</div>

CSS:

.block {
    display: block;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 980px;   
}

.arrow{
margin-right: 290px;
float: right;
margin-top: -45px;

}

Answer 1

由于您使用的图像看起来像是用于装饰目的，我会在 h1 上使用 background，将其放在最右边，然后使用padding-right 将图像推离 h1。例如，尝试:

CSS:

h1 {
    background: url(images/arrow-down.png) no-repeat right center;
    padding-right: 40px; /* tweak this */
}

Codepen example

至于那些建议使用 :after 伪选择器的人，我强烈建议不要这样做，如 :after is not great on older IE browsers (此外，对于一项简单的任务来说，这是一个不必要的复杂解决方案)。