imgを縦に並べると隙間が…
2006年07月03日
知ってました？
img画像をリスト（<li>）で縦に並べようとすると、微妙に隙間ができちゃう。
これを解除する方法なんですが。
imgのスタイルシートに
border:0;
ってやれば、Firefoxでは正常に隙間がなくなりました。
でも、この方法だと、IE6.0ではまだ隙間が･･･。
で、FirefoxでもIEでもちゃんと隙間なくimgを並べる方法。
実は意外と簡単で、
imgのスタイルシートに、
border:0;
vertical-align:top;
を加えてあげれば、なんと不思議。
両方のブラウザで隙間なく配置されます。
Macでも多分大丈夫です。
これで、img画像をリスト化してもキレイに表示されますね(^^ゞ
スポンサードリンク
トラックバック
このエントリーのトラックバックURL:http://www.sriproot.net/mt/mt/mt-tb.cgi/98
« デ、データ… | TOP | リンクリンクリンク »
コメント
こちらのブログを大変参考にさせてもらっております。今、通信教育でWEBを勉強しているのですが、ある程度、各ソフトの操作方法はわかるのですが、いざサイトを作るとなると、アイデアが浮かばず、いっこうに進みません。創造性にかなり欠けております。１０ヶ月ほどオンラインスクールで勉強しても、操作がわかっていても、サイトが作れないといった感じです。こういう場合は、向いてないのでしょうか？PCスクールで諦める方も多いのでしょうか？メールアドレスあてでもけっこうですので、返信よろしくお願いいたします。
Posted by:kazuya | 2006年07月08日 00:39
はじめまして。
僕もはじめはそうでしたよ(^^ゞ
作ろう！と意気込んでも、どうしたらいいものか…。
いきなり作ろうとしても、効率が悪いので、『既存の会社のサイトをリニューアル』という題目で作ってみてはいかがでしょうか。
画像なども個人で使用するという目的であれば問題ないでしょうし。
車が好きならトヨタとかホンダとか。
食品が好きなら味の素とか日清とか。
そのサイトを見て自分がよくないと思うところをピックアップして、それらを修正したものを作り上げていくように考えると、進んでいきますよ(^^ゞ
そういうのに関連した記事を今度書いてみますので、期待せずにお待ちくださいな。
Posted by:shozo | 2006年07月08日 14:39
はじめまして。
実は仕事で悩んでいた箇所なので、たいへん助かりました！＞＜
Posted by:m | 2007年08月23日 20:03
ブラウザ間でのCSS解釈の違いって結構悩みますよね。
お役に立ててうれしいです(^^ゞ
Posted by:shozo | 2007年08月24日 10:34
はじめまして。私も同様の症状で困っていたところ
こちらのブログの情報が大変参考になりました。
ありがとうございます。
Posted by:匿名 | 2008年11月06日 14:53
お返事遅くなりました。
いやいや、だいぶ昔の記事ですが、いまだ役に立ってくれててうれしい限りです。
Posted by:shozo | 2008年12月04日 22:02
参考になりました。いやーよかったよかった。画像が隙間なく並んでくれるようになりました！
Posted by:feng | 2009年08月17日 22:14
参考になってよかったです。
記事自体は古いんですけど、これ覚えておけば、最初にスタイルシートに書いておけば大丈夫ですしね。
Posted by:shozo | 2009年08月17日 23:06
コーディングで悩んでいたところこちらに辿りつきました。
本当に一発でした！すっきり！
ありがとうございました。
Posted by:takumi_trush | 2010年09月08日 12:24
一発で解決して何よりです。
ほんと悩むとはまってしまいますもんね。
Posted by:shozo | 2010年09月20日 23:06