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>

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2009/08/24 00:33:35
  • 終了:2009/08/27 02:15:30

ベストアンサー

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812009/08/24 10:34:13

ポイント77pt

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

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

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

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

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


http://q.hatena.ne.jp

id:geageagoo

ありがとうございます。

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

バッチリでした。

2009/08/24 23:39:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません