リストの一つの項目のみの右側に画像を表示させたい

質問

リストの一つ項目のみの右側に画像を表示させたいのですが、どうすれば良いのでしょうか？

具体的には自分のサイトの既存のリストに新しい項目を付け加えた時にその後ろに"new"を表す画像を表示させたいのですが。(下記■の部分に）

・りんご
・バナナ
・みかん
・メロン■

出来ればCSSで設定したいです。

htmlに直接画像を貼り付けても良いのですが、そうすると画像を貼り付けた行の前後だけline-heightが狂って（狭くなる）しまいます。これが解決できればhtml内への記述でも構いません。

**html**
<ul>
<li><a href="a.html">りんご</a></li>
<li><a href="b.html">バナナ</a></li>
<li><a href="c.html">みかん</a></li>
<li><a href="d.html">メロン</a></li>
</ul>
*******************

**CSS**
ul{
line-height: 170%;
margin:0px;
padding:0px 0px 30px 20px;
}
******************

liに対して背景画像とその位置をpaddingで設定してやるのかなと考えましたが上手くいきません。

よろしくお願いいたします。

回答No.1

partita · ベストアンサー

＞とその位置をpaddingで設定してやるのかなと

背景画像の位置はpaddingではありません。
background-positionという属性があります。

この場合、
background-position:right center;
だと思います。
ただし、背景画像なので、文字と重なることもありますので要注意。

お礼

回答ありがとうございます。
おっしゃる通りやってみたら、文字の末尾より大分右側に表示されてしまったので、その行だけにwidthを指定したら希望の位置に表示することが出来ました！

ご助言大変参考になりました。
どうもありがとうございました！！