<li>をdisplay:inline;で横並びにしたときの例の隙間

ナビゲーションを横並びに配置するときに<li>でマークアップして、css側でdisplay:inline;としてやることが多いんです。そのときにナビゲーションの画像の下に出来てしまう隙間に最初は悩まされてました。
原因はvertical-alignの初期値がbaselineというのが原因らしく、

li img{
vertical-align:bottom;
}

と指定してあげることで下の隙間はなくなってくれます。

でも下の隙間は埋まってくれても画像の右側に隙間は埋まってくれません。回避方法として「該当箇所のソースの改行をとる」があるのですが、ソースが読みにくくなってしまって仕方がなくてとても嫌な感じ。

<ul>
<li>なびげーしょん いち<li><!--
--><li>なびげーしょん に<li><!--
--><li>なびげーしょん さん<li><!--
--><li>なびげーしょん よん<li><!--
--></ul>

このように改行位置に空のコメントタグを挿入する方法もあるようです。
出来ればcssでどうにかならないかなとあがいてみたんですが。
<li>にwidthかheightを指定するとIEでのみ隙間が消えました。なぜかはわからないのですが。。

改行が半角スペースとして認識されてしまうことが原因らしいんですがどうにかならないかなぁ :(

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=351

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 2.50 out of 5)
Loading ... Loading ...

ヒロ said,

2007/7/6 金曜日 @ 23:23:33

はじめまして。ヒロと申します。

リストタグの”display:inline;”で発生する隙間にはよく苦しみます。
特にナビゲーション部分などで画像でピッチリ並べないといけないときは、あの隙間にイラダチすら感じます。

私の場合はリストタグに”float: left;”を設定することで、なんとかごまかしています。

naoco said,

2007/7/7 土曜日 @ 2:37:00

ヒロさん、はじめまして。
コメントありがとうございます。

私もfloatをよく使うのですが、display:inlineでうまくいかないかなと色々模索していたところでした。何かいい方法があればいいのですが。。。

ぷる said,

2009/8/15 土曜日 @ 0:45:14

http://www.css-lecture.com/log/css-beginner/043.html
にありました。

naoco said,

2009/8/18 火曜日 @ 13:05:38

ぷるさん

はじめまして。
参考ページ教えてくださってありがとーございます :razz:

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 3 users add to del.icio.us 1 users add to livedoor.clip 0 user