人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

cssのulを使い、liごとに違うイメージをbackground-imageで指定し、そのliにテキストを入力しています。liは15個くらいあります。

liのサイズをイメージのサイズと同じにして、paddingで内側に余白を取りたいのですが、イメージのサイズより広がってしまいます。

テキストは短いのから長いのまであって、長いときにはBRを使わずに余白で折り返したいのですが、うまくイメージ内に収まってくれません。


cssは独学ですので、きっと間違いだらけだと思います。

どなたかどうぞ宜しくお願いします。


#contents #img1 #li1 {
background-image:url(../images/■■.gif);
background-repeat:no-repeat;
width:302x;
height:60px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}

#contents #img1 #li2 {
background-image:url(../images/●●.gif);
background-repeat:no-repeat;
width:302px;
height:63px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}


<div id="contents">
<ul id="img1">
<li id="li1">ああああああああ</li>
<li id="li2">いいいいいいいいいいいいいいいいいいいいいいいいいい</li>
</ul>
</div>

●質問者: geageagoo
●カテゴリ:ウェブ制作
✍キーワード:background-image background-repeat br CSS GIF
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GoldenDawn
●77ポイント ベストアンサー

width で指定するのは「内容」の幅なので、左右の padding を指定するとその要素自体の幅は「内容の幅」+ padding となります。

( IE6 の互換モードでは要素の幅が padding も含めた大きさになります。)

そこで、要素の幅を画像に合わせるには

  1. width と padding の合計を 画像の幅に合わせる
  2. li の width を画像の幅で指定し、li の中に div や p 要素などを入れ、これらに margin を指定してやる

といった方法があります。


http://q.hatena.ne.jp

◎質問者からの返答

ありがとうございます。

イメージの幅以上にはしたくなかったので、liの中にdivを追加しました。

バッチリでした。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ