- ベストアンサー
横ナビ li 隙間をなくす
最近「xhtml+css」を勉強してHPを開設しようと考えています。そこでデザインを横ナビゲーションにして作成しようと以下のソースでプログラムを書いているのですが、画像と画像の間に隙間ができてしまいます。他にも似た質問がありいくつか試してみたものの解決できずじまいだったため質問させて頂きます。また勉強中のためソースが滅茶苦茶かもしれません。こうした方がより良いというモノがあれば合わせてご指導願います。 xhtml <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta http-epuiv="Content-Style-Type"content="text/css" /> <title>index</title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="navi"> <ul> <li><a href="top.html"><img src="top2.jpg" alt="top"/></a></li><!-- --><li><a href="blog.html"><img src="blog2.jpg" alt="blog"/></a></li><!-- --><li><a href="flash.html"><img src="flash2.jpg" alt="flash"/></a></li><!-- --><li><a href="photo.html"><img src="photo2.jpg" alt="photo"/></a></li> </ul> </div> </body> </html> css #navi ul li{list-style:none;} #navi img{float:left;margin:0;padding:0;border:none;vertical-align:bottom;} body {background-color: #ffffff;} ブラウザはFox3をメインにしています。IE6.7での表示も統一できれば尚嬉しいです。 よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
楽をするなら、 #navi li {display: inline;} これだけ。せっかくli要素間の改行をコメントアウトしたんだか ら、活かしましょうね。ちなみに<div id="navi">は意味がなくて <ul id="navi">でオッケー。それより文字エンコーディングが矛盾 している方が心配だなぁ。
お礼
迅速な対応ありがとうございました。しかしながら上記通り私の画像ミスでご迷惑をお掛け致しました。申し訳ございません。しかしgrumpy_the_dwarf様の回答にも書かれている通り文字エンコーディングの矛盾など色々問題もあるため今後も勉強して修正して行きたいと思います。
お礼
迅速な対応ありがとうございました。 そして対応して頂いたにも関わらずにソースの問題ではなく画像の問題でした。いずれにせよソース自体も駄目な箇所があるみたいなので今後も修正して行きたいと思います。大変申し訳ございませんでした。