CSSのliタグで画像との間に空白ができてしまいます
- CSSのliタグを使って画像との間に空白ができてしまう問題について解決方法を教えてください。
- WebページのCSSでliタグを使用して画像を表示している際に、画像と画像の間に2px程度の空白ができる問題が発生しています。
- CSSのmarginとpaddingを0に設定しても、liタグの直下にある画像と画像の間に空白ができてしまいます。この問題を解決する方法を教えてください。
- ベストアンサー
CSSのliタグで画像との間に空白ができてしまいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS</title> <style type="text/css"> <!-- li { margin:0px; padding:0px; list-style-type:none; } --> </style> </head> <body> <ul> <li><img src="aaa.gif"></li> <li><img src="bbb.gif"></li> <li><img src="ccc.gif"></li> </ul> </body> </html> こんな感じのソースですけど、画像と画像の間に空白（2pxくらい）が できてしまいます。 画像と画像をくっつけたいのですがどうすればいいでしょうか？ 教えてください。 よろしくお願いいたします。
- dream_cats
- お礼率68% (26/38)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
レイアウトの為にリストのulを使うのは不自然かもしれません(本来の目的から外れているし 配置をいじりたいのであれば、ボックスを使って、画像自体に余白を入れないように記述した方がスマートだと思いますが。
その他の回答 (1)
- 345itati
- ベストアンサー率48% (795/1639)
単純に <ul><li><img src="aaa.gif"></li><li><img src="bbb.gif"></li><li><img src="ccc.gif"></li></ul> と、ソース上で改行しなければいいのでは？
お礼
ありがとうございます。やってみましたが、そういう問題ではないようです。
関連するQ&A
- ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）
ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。 具体的ソースは下部に記述します。 印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。 参考に、自分の環境も記載します。 なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP professional Version 2002 service Pack 2 ブラウザ IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all"> <!-- ul.pageLink{ margin: 0; padding: 0px; list-style: none; } ul.pageLink li{ padding:0; margin: 0; float: left; } --> </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>
- 締切済み
- HTML
- liタグで先頭のみボーダーを消す方法
liタグで先頭のみボーダーを消そうと下記のソースを記述してInternet Explorer6で閲覧した所、一瞬liタグの先頭でボーダーが見えてしまう事がありました。 その為、これを抑止したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、下記が今の所考えている条件となります。 1. http://www.kyosuke.jp/yugajs/のyuga.js 0.7.1を使用し、最初の要素にclass="firstChild"、 最後の要素にclass="lastChild"を付加しておりますが、なるべくならこの仕組みは使用し続けたいと思います。 2. liの数はCMS上で動的に変化させても問題ないようにしたいと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text/javascript" src="js/yuga.js" charset="utf-8"></script> <title>title</title> <style type="text/css"> <!-- body { margin-top:10px; } ul li.firstChild { border-top:0; } li { border-top:1px solid; } --> </style> </head> <body> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> <div><img src="Sunset.jpg" alt="" width="800" height="600" /></div> <div><img src="Winter.jpg" alt="" width="800" height="600" /></div> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- HTML
- CSSで縦長・横長の写真を一定に並べたい
写真のギャラリーのようなものを作成しています。 写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。 この写真を正方形の方眼紙に並べるように配置したいと思っています。 テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。 リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。 横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。 試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。 現在のソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ギャラリー</title> <style type="text/css"> <!-- #content { width: 612px; } #content ul { margin: 0px; padding: 0px; } #content li { list-style: none; line-height: 200px; float: left; height: 200px; width: 200px; text-align: center; border: 2px solid #009933; } #content li img { vertical-align: middle; } --> </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。 よろしくお願い致します。
- ベストアンサー
- HTML
- CSS リスト 外枠から文字と画像がはみ出る clearfix
｜ーーーーーーーーーーーーーーーーーー｜ ｜｜ーーーー｜ →1111 →444 →777 ｜ ｜｜ 画像 ｜ →2222 →555 →888 ｜ ｜｜ーーーー｜ →3333 →666 →999 ｜ ｜ーーーーーーーーーーーーーーーーーー｜ 質問お願いします。 上記のように、左に画像があり、その横にリストが3つ並んでいる状態で1ｐｘの外枠をつけたいのですが、 外枠が上一行目の所までしか囲んでくれません。 （※→は矢印の画像です） CSSの方に入っている.clearfixを使うとよいそうですが、 HTMLのどの部分に入れても上手く表示されません…。 どのように使えばいいのでしょうか？ またどこか間違っている所があるのでしょうか？ よろしければご教授ください。 ソースです。 --------------------------------- html <div class="box"> <img src="000000.gif" class="imgL"/> <ul> <li><img src="img/yajirusi.gif" /> 1111</li> <li><img src="img/yajirusi.gif" /> 2222</li> <li><img src="img/yajirusi.gif" /> 3333</li> </ul> <ul> <li><img src="img/yajirusi.gif" /> 4444</li> <li><img src="img/yajirusi.gif" /> 5555</li> <li><img src="img/yajirusi.gif" /> 6666</li> </ul> <ul> <li><img src="img/yajirusi.gif" /> 7777</li> <li><img src="img/yajirusi.gif" /> 8888</li> <li><img src="img/yajirusi.gif" /> 9999</li> </ul> </div> --------------------------- css .imgL { float: left; margin: 0 10px 10px 0;} .box { border:1px #CCCCCC solid; padding:5px;} .box ul{ float:left;} .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } /* exlude MacIE5 \*/ * html .clearfix { height: 1% } .clearfix {display:block;} /* end MacIE5 */
- ベストアンサー
- HTML
- imgを含むliの高さが大きくなるバグ？
お世話になります。 ＷｉｎＸＰｓｐ２＋ＩＥ６の環境のみで再現する事象です。 高さ２０ｐｘの画像（img/menu_home_w100h20.gif）を、上にマージンを１０ｐｘとって配置しています。 都合２０ｐｘ＋１０ｐｘで３０ｐｘの高さとなるはずですが、なぜか３４ｐｘあります。調べてみるとli要素がなぜか４ｐｘ下に膨らんでしまっているようです。 ちなみにＩＥ６以外のブラウザ（ＩＥ７、ＦｉｒｅＦｏｘ２、Ｏｐｅｒａ９．１）ではいずれも３０ｐｘとなります。 この事象を回避する手段がありましたらご教授いただければ幸いです。 下記は拙いソースです。見づらくてすいません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> *{ margin:0px; padding:0px; } html,body{ width:100%; height:100%; color:#663300; } .clear{ clear:both; } #box{ width:800px; height:30px; background-color:#FFFFCC; position:absolute; z-index:-1; } #menus{ display:block; height:20px; } #menus li{ float:left; display:block; margin-left:15px; height:20px; background-color:#66FFFF; list-style:none; } #menus li img{ margin-top:10px; } </style> </head> <body> <div id="box">あ</div> <ul id="menus"> <li><img src="img/menu_home_w100h20.gif" alt="ホーム" border="0" /></li> </ul> </body> </html>
- ベストアンサー
- HTML
- <li>メニューの背景画像、IEだけ出ない
どうぞよろしくお願いします。 あれこれやったのですが、なぜかwin IE7でだけ（IE6は未確認） メニューの背景画像（グラデーションを使ったもの）が表示できません。 モダンブラウザとmacでは確認しました。 今日一日悩んでるのですが、どうしても分かりません。 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body><div class="right">【ダミーテキスト】</div> <div id="menuarea"> <!--メニューエリア--> <ul id="menu"> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">あいうえお</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">かきくけこ</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">たちつてと</a></li> </ul> <ul id="bnr"> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> </ul> </div> <!--/メニューエリアここまで--> </body> </html> 【CSS】 .right { width:300px; float:right; border:1px solid red; } #menuarea { font-size:80%; width:168px; height:100%; } ul#menu { width:168px; margin-left:0px; padding-left:1em; padding-top:1em; padding-bottom:100px;/*メニュー下の余白*/ background:url(../common/menu-up.jpg)no-repeat;/*メニュー画像上部*/ } ul#bnr { width:168px; background:url(../common/menu-btm.jpg)no-repeat;/*メニュー画像下部*/ margin-left:0px; padding-left:0.7em; padding-bottom:10px; background-position:0 100%; }
- ベストアンサー
- HTML
- リストタグに画像を入れた場合
リストタグに画像<img>タグを入れたのですが、Firefoxでは隙間なく表示されますが、IE6で確認すると、画像の下に隙間ができてしまいます（3pxほど）。 何か修正点や、解決策があればお願い致します。 そもそも、リストタグに画像を入れることがおかしいのでしょうか？ 【HTML】 <ul id="navi"> <li><img src="../img/aaa.gif" width="200" height="50"></li> <li><img src="../img/bbb.gif" width="200" height="50"></li> <li><img src="../img/ccc.gif" width="200" height="50"></li> <li><img src="../img/ddd.gif" width="200" height="50"></li> </ul> 【CSS】 ul#navi{ margin: 0px; padding: 0px; } ul#navi li{ margin: 0px; padding: 0px; list-style-type: none; list-style-position: outside; display: block; width: 200px; height: 50px; }
- 締切済み
- HTML
- htmlとcss
以下のようにボタンを配置し、その横に文字を書きました。 水平線上で見ると、ボタンのほうが若干上に配置されてしまいます。 綺麗に平行にするためにcssの設定をしたいのですが、誰か教えてくれませんか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li { list-style-image: url(img/bot01.gif); font-size: 12px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } </style> </head> <body> <ul> <li>ああ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> </ul> </body> </html>
- 締切済み
- HTML
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。 作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
お礼
ありがとうございます。 おっしゃるとおりです。 頭が固すぎました。 ボックスでレイアウトします。