1

下の図でわかるように、H1 テキストの先頭に矢印の画像を配置しました。私はマージンの右と上で遊んでそれをしました。それは機能していますが、問題は、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;

}
4

6 に答える 6

5

あなたが使用している画像は装飾目的のように見えるのでbackground 、h1代わりに を使用し、右端に配置し、 を使用padding-rightして画像をh1. たとえば、次を試してください。

CSS: 

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

コードペンの例

疑似セレクターの使用を提案している人については、古い IE ブラウザーでは:after:after が適切ではないため、そうしないことを強くお勧めします(さらに、単純なタスクに対して不必要に複雑なソリューションです)。

于 2013-09-25T20:28:27.697 に答える
3

画像を h1 の背景に配置し、background-position を使用して右揃えにすることはできませんか?

コードペンの例

于 2013-09-25T20:27:24.177 に答える
2

CSS疑似要素を使用できます:after （iE8および+のみ）：

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;
    }
于 2013-09-25T20:33:38.507 に答える
2

jqueryでその問題を解決することもできます。

$(document).ready(function(){

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

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

});

css で margin-right を削除する必要があります。

挨拶ティモテウス

于 2013-09-25T20:39:49.850 に答える
1

別の方法として、画像がテキストの直後にある場合は、疑似要素 (: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;
}

コードペンの例

于 2013-09-25T20:30:58.397 に答える
-1

H1 タグにクラスを指定し、css 'after' セレクターを使用できます。

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

于 2013-09-25T20:29:54.673 に答える