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

目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので本題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad

[ufomap]

リストの背景

[kasshin]

display: inline-blockの指定

[purazumakoi]

a要素で2行になった時に改行しないようにする

[shidho]

display:inline-blockね。

[lliorzill]

display: inline-block を使って、背景画像に合うよう2行にわたるa要素テキストの見栄えを整える。

[osktaka]

display: inline-block;

[ryownet]

display: inline-block; 知らんかったねー

[halohalolin]

display: inline-block を使うのがコツ

[kurobuchi]

おお、これは有難い。しかも簡単！

[toguo]

a要素が2行になった場合に背景下にテキストが来ないようにする方法。これ地味に知りたかった

[kkeisuke]

display: inline-block

[kits]

liにpadding-left、aをblockでもいいような。

[maRk]

display: inline-blockで

[hiro_y]

a要素が2行にまたがってしまいそうな場合にリストマーカー代わりの背景とアラインを合わせる。

[nanto_vi]

リンクが項目の矩形全体で機能してほしいならaにdisplay: block;とpadding-leftを指定するし、文字列部分だけでいいならliにpadding-left、aに負のtext-indentを指定するかな。

[thase]

今までpaddingと-indentを使ってたよ。今度試してみる。話変わるが、background-positionにem使えば、画像を1行目の真ん中に持ってこれるのね。知らなかった。orz