79

リスト項目の右側に背景画像を追加したいのですが、右側にもパディングを入れたいのですが、それができません。次の例を見てください。

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/

4

9 に答える 9

198

CSS background-originを使用すると、より正確に指定できます。

background-origin: content-box;

これにより、画像がボックスのパディングを尊重します。

于 2015-08-31T11:14:36.487 に答える
56

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

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

ピクセルパーフェクトではありませんが…</p>

于 2012-04-17T09:08:31.737 に答える
15

CSS background-clipを使用:

background-clip: content-box;

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

于 2016-11-22T13:58:08.293 に答える
6

を使用background-position: calc(100% - 20px) centerして、ピクセルの完成度を高めるcalc()ことが最善の解決策です。

ul {
  width: 100px;
}

ul li {
  border: 1px solid orange;
  background: url("https://placehold.co/200x125/e16d65/FFFFFF/png") no-repeat calc(100% - 10px) center;
}

ul li:hover {
  background-position: calc(100% - 20px) center;
}
<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>

于 2015-12-13T13:28:43.893 に答える
4

次の 2 つの方法で結果を得ることができます。

最初の方法は、位置の値を定義:-

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/

CSS :before:afterセレクターによる2 番目の方法

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/

于 2012-04-17T10:07:02.287 に答える
2

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

于 2012-04-17T09:30:27.560 に答える
0

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

例えば

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>
于 2012-04-17T09:33:23.830 に答える