a要素が2行になった場合に背景下にテキストが来ないように。｜CSS HappyLife

リストにリンクをはる際、リストマーク（画像）にもリンクをはるにはa要素にいろいろ指定してやればよいとのことですが、その場合、余白部分にもリンクがはってしまうとのこと。余白部分にはリンクをはらない方法があるか考えてみます。

まずぱっと思いつくのが「text-indent」の使用です。なので、これで解決できるかやってみます。

<ul>
<li><a href="menu1">メニュー1</a></li>
<li><a href="menu2">メニュー2</a></li>
<li><a href="menu3">メニュー3メニュー3メニュー3メニュー3
メニュー3メニュー3メニュー3メニュー3メニュー3メニュー3メニュー3</a></li>
</ul>

CSSコード

ul {
   margin:0;
   padding:0;
   width:300px;
}

li {
   list-style-type: none;
   border-bottom: 1px dotted #999;
   padding-left:18px;
}

li a {
   padding-left:18px;
   text-indent:18px;
   margin-left: -18px;
   background: url(bg_list.gif) no-repeat 0 3px;
}

とりあえず、Windowsの

• Firefox3.0.9
• Opera9.64
• Chrome1.0
• Safari3.2.1

Mac OS Xの

• Safari3.2.1
• Firefox3.0.4

で問題解決！

Firefox3でのキャプチャ

が、IE6と7は散々たるもの・・・。IE8は環境がないんで試してないです。

IE6でのキャプチャ

ちょっとこれからIEでもうまくできるか試行錯誤してみます。

追記

IEでむむむと悩んでいると、平澤さんからIEならzoom使っていけば行けたような気がしないでもなかったようなとアドバイスいただいたので、「zoom:1」を指定してみると・・・。

IE6でのキャプチャ

これはもしや「text-indent」っていらないんじゃ・・・。と思って、text-indentを削除してみると。

IE6でのキャプチャ

おおお！できました！が、この方法だと、余白の部分までリンクがはってしまうんですね＞＜なんか他に良い方法ないですかね？このくらいだったら目をつぶってもよい？

text-indentを削除しても他のブラウザには何も影響はありませんでした。なんだ、text-indentいらないんですね。まあインデントのような方式を使うという考え方としては合っていたのかな？「display:inline-block;」を使うとブロック構造っぽくなっちゃうせいで余白部分もリンクがはってしまうみたいですね。

結果、CSSソースコードは以下のようになりました。

CSSコード

ul {
   margin:0;
   padding:0;
   width:300px;
}

li {
   list-style-type: none;
   border-bottom: 1px dotted #999;
   padding-left:18px;
}

li a {
   padding-left:18px;
   margin-left: -18px;
   background: url(bg_list.gif) no-repeat 0 3px;
   zoom:1;
}

サンプル

サンプルページはこちらからどうぞ。