Question

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

enter image description here

<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

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

CSS：

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

Codepen example

对于那些建议使用:after伪选择器的人，我强烈建议不要这样做，因为：在is not great on older IE browsers之后（加上它是一个简单任务的不必要复杂的解决方案）。

Answer 2

你能不把图像放在h1的背景中，并使用背景位置将它对齐到右边？

Codepen Example

Answer 3

您可以使用CSS伪元素:after (only for iE8 and +)：

HTML：

<h1>Hi there !</h1>

您的CSS代码（假设您的图片为50px * 50px）：

h1 {
    background: #eee;
    height: 50px;
    line-height: 50px;
    padding-right: 50px;
    position: relative;
    width: 300px;
}

h1:after {
    background: url('images/arrow-down.png') bottom right no-repeat;
    content: '';
    display: block;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
}

H1 padding-right必须与您的图片CSS width相等。

或者只是使用：

 h1 {
        background: url('images/arrow-down.png') bottom right no-repeat;
        padding-right: 50px;
    }

Answer 4

你也可以用一些jquery来解决这个问题。

$(document).ready(function(){

    arrowMargin();
    function arrowMargin() {
        $('.block img').css('margin-left', $('.block h1').width());
    }

    $(window).resize(function(){
        arrowMargin();
    });

});

你必须在css中删除你的边距权利。

问候Timotheus

Answer 5

作为替代方案，如果图像直接在文本之后，则可以使用伪元素（：after）

h1:after {
  position:absolute;
  content:"";
  width:50px;
  height: inherit;
   background-image: url(path_to/images/arrow-down.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-left: 10px;
}

Codepen Example

Answer 6

你可以给H1标签一个类，并在'选择器后使用css'：

http://www.w3schools.com/cssref/sel_after.asp

无论文本的宽度是多少，都要在H1文本旁边放置一张图片

6 个答案: