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

目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。
そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz
あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。

タイトルがa要素になってますが、インライン要素でもいいです。
背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。

タイトルって難しいですねorz

さて、時間もあまりないので本題に。

• サンプルページを見る

---- こっから続き

以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpadding-leftとかで調整するとマーカー部分がクリック出来ないので、a要素に指定するって事があるかと。

でも、a要素に指定するとテキストが長かったり大きくしたりして複数行になると、マーカー部分の下にテキストが来てしまい、デザイン的にちょっと美しくありません。

そこで、それに対応するためには以下のような感じでやるといい具合です。

#main .menuList li a {
	display: inline-block;
	padding-left: 15px;
	background: url(../img/item/mark.gif) no-repeat 0em .4em;
}

display: inline-blockの指定をする感じです。
この方法でも2行になった場合、文字が終わってる空白部分もクリック出来てしまいますが、その辺は見なかったことに！

追記：

zoomいらなかったので、ちょこちょこ修正してます。すみません。
ちゃんと確認してから書かないとダメですねorz
なぜか必要な気がしてたんだけど、何でだろう・・・

各種SBMに追加

• 
• 
• 
• 
• 
• 
•