html - 右からの背景画像のパディング

Question

divの右側に背景画像を設定し、左側からの固定距離を定義せずに右側からパディングを設定するにはどうすればよいですか？たとえば、画像をdivの右側に設定し、常に右から20pxのパディングを設定したいとします。

divの幅は常に同じではないため、正確な位置を定義できません。divの幅に関係なく、右側に正確に20pxのパディングが必要です。

次のコードを試していますが、機能しません。

HTML：

<div>Title</div>

CSS：

div{
  background: url(gowalla.png) no-repeat right center;
  width: 400px;
  border: 1px solid red;
  padding: 20px;  
}

デモ： http： //jsfiddle.net/mQGcF/

score 2 · Accepted Answer

でやるbackground-position: 96% 50% ;

最初の値はx-axis、2 番目の値を示しますy-axis。

説明については、このリンクを参照してください。

 div{
  background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) no-repeat 96% 50% ;
  width: 400px;
  border: 1px solid red;
  padding: 20px;  
}

デモ

更新された回答

外側の div を追加して、内側の div にマージンを指定してみてください

HTML

<div class="wrap"><div>Title</div></div>

CSS

 .wrap{
        border:solid 1px green; 
      display:inline-block;  
      width:auto; 
    }
    .wrap div{ 
      width: 400px;  
      background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) right no-repeat;  
      margin-right: 20px; 
      padding:20px
    }

デモ 2

score 1 · Accepted Answer

私の知る限り、CSSではこれを行うことはできません。あなたのための2つのオプションだけがあります：

画像に間隔を含めます。これは不可能かもしれませんが、可能であれば最も簡単です。
2つの包含DIVタグを使用します。1つは境界線を保持し、外側の間隔は2つ目は背景を保持します。
```
<div class="outer"><div class="inner">Title</div>
```

そしてCSS

.outer{
    width: 400px;
    border: 1px solid red;
    padding: 0px 20px;  
}
.inner{
    background: url('gowalla.png') no-repeat right center;
    padding: 20px 0px;  
}

http://jsfiddle.net/mQGcF/4/

score 0 · Accepted Answer

0

Uは使用できます

padding-right:20px;

また

 padding:0px 20px 0px 0px;

こちらのデモ

于 2013-01-08T07:29:11.983 に答える

html - 右からの背景画像のパディング

3 に答える 3

Related

Reference