web-dev-qa-db-ja.com

CSS：背景画像とパディング

リストアイテムの右側に背景画像を追加し、右側からもパディングを追加したいのですが、できません。次の例をご覧ください。

HTML：

<ul>
    <li>Hello</li>
    <li>Hello world</li>
</ul>

CSS：

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

ピクセル単位で画像の位置を設定できることは知っていますが、各liの幅は異なるため、それはできません。

ここにJSFiddleリンクがあります： http://jsfiddle.net/QeGAd/1/

htmlcsspadding
51
user966582

パーセント値を使用できます：

background: yellow url("arrow1.gif") no-repeat 95% 50%;

ピクセル完璧ではありませんが…

37
Juan G. Hurtado

これにより、より正確になります。

background-Origin: content-box;

これにより、画像はボックスのパディングを尊重します。 http://www.w3schools.com/cssref/css3_pr_background-Origin.asp

125
Mladen Janjetovic

次の2つの方法で結果を達成できます。

最初の方法defineposition values：-

[〜＃〜] html [〜＃〜]

 <ul>
 <li>Hello</li>
 <li>Hello world</li>
 </ul>

[〜＃〜] css [〜＃〜]

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}


ul li:hover{
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}

最初のデモ：-http://jsfiddle.net/QeGAd/18/

2番目の方法by CSS：before：afterセレクター

[〜＃〜] html [〜＃〜]

<ul>
<li>Hello</li>
<li>Hello world</li>

[〜＃〜] css [〜＃〜]

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
}

ul li:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

ul li:hover {
    background:yellow;
}

ul li:hover:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

2番目のデモ：-http://jsfiddle.net/QeGAd/17/

4
Shailender Arora

background-position: calc(100% - 20px) centerを使用します。ピクセルの完全性にはcalc()が最適なソリューションです。

ul {
  width: 100px;
}
ul li {
  border: 1px solid orange;
  background: url("http://placehold.it/30x15") no-repeat calc(100% - 10px) center;
}
ul li:hover {
  background-position: calc(100% - 20px) center;
}
<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>
3
Mo.
background-clip: content-box;

背景はコンテンツボックス内にペイントされます。

3
Ed Kolosovsky

このピクセルを完全にする実際の唯一のオプションは、GIF自体に透明なパディングを作成することです。そうすれば、実際にLIの右に揃えて、探している背景のパディングを保持できます。

2
Dennis Jamin

ツアーブロック要素にパディングを追加して、background-Originスタイルは次のようになります。

.block {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border:1px solid #e5e5e5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-Origin: content-box;
  background-image: url(_your_image_);
  height: 14rem;
  width: 10rem;
}

いくつか確認できます https://www.w3schools.com/cssref/css3_pr_background-Origin.asp

0
Volodymyr Khmil

direction CSSプロパティをrtlに設定するとうまくいくはずです。 IE6ではサポートされていないと思います。

例えば

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>
0
hjindal