リストの一つ項目のみの右側に画像を表示させたいのですが、どうすれば良いのでしょうか?
具体的には自分のサイトの既存のリストに新しい項目を付け加えた時にその後ろに"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ベストアンサー
- 回答日時:
>とその位置をpaddingで設定してやるのかなと
背景画像の位置はpaddingではありません。
background-positionという属性があります。
この場合、
background-position:right center;
だと思います。
ただし、背景画像なので、文字と重なることもありますので要注意。
回答ありがとうございます。
おっしゃる通りやってみたら、文字の末尾より大分右側に表示されてしまったので、その行だけにwidthを指定したら希望の位置に表示することが出来ました!
ご助言大変参考になりました。
どうもありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
WEBページを強制的に横画面で見...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
HTMLですCSSです 画像のように...
-
テーブルタグのセルの幅の一部...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
青い枠のみのHTML
-
HTMLです 店主のこだわりという...
-
HTMLです 四角みたいにして中に...
-
初心者html・CSS ウィンドウを...
-
12月のカレンダーを表すHTMLを...
-
pythonに自分で作ったHTMLを、...
-
HTMLです次の意味を持つ要素ま...
-
アコーディオンメニューが思う...
-
スマホ(android)のタッチパネ...
-
HTMLの CSSのファイルというの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
htmlで<form>~</form>を並べて...
-
WEBページを強制的に横画面で見...
-
コードを書いて下さい( ; ; )...
-
css初心者 フレックスボックス...
-
テーブルのセルデータを自動改...
-
CSSデータの作成方法について(...
-
HTMLで画像をポップアップで表...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
HTMLで特定の文字だけ色を変え...
-
プログラミングの勉強が進みません
-
スマホでHTMLファイルを開いて...
-
テーブルタグのセルの幅の一部...
-
CSSでつくったメニューのアニメ...
-
大至急。webのシングルページを...
-
角丸画像の背景色を透明にした...
-
HTML入門でもう躓いてしまった。
-
HTMLの CSSのファイルというの...
おすすめ情報