締切済み

画像の隙間を埋める方法

2012/11/21 16:39

CSSで li {display: inline} を記述すると水平方向に並んだ画像の隙間は消えるのですが <a href =""> でリンクを貼った部分の隙間が消えません。何か良い方法をご存知でしたらご教示お願いします。

qwert789
お礼率40% (26/64)

CSS
回答数2
ありがとう数0

回答全件

水平方向の隙間が消えるということは垂直方向に隙間があるという意味でしょ…

2012/11/21 19:30

HTMLのソースを適当に隠して示してください。 <a href="">…

2012/11/21 16:51

みんなの回答 （2）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2012/11/21 19:30 回答No.2

水平方向の隙間が消えるということは垂直方向に隙間があるという意味でしょうか？よくあるパターンで、画像を文章のどの部分にあわせるかで失敗しているのでは？と推察します。アメリカ生まれなhtmlなので、和文のように文字の下が決まっていません。ＡＢＣの下にあわせるbacelineパターンとygjのようにそれよりも下のピョコンとした下に合わせるbottomパターンがあります。 li img{ vertical-align:bottom; } を追加してみてください。解決できないようでしたら、問題が再現できる最小限のソースの提示をいただけますか？

全文を見る

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/21 16:51 回答No.1

HTMLのソースを適当に隠して示してください。 <a href="">には関係ないはずです。 <ol> 　　<li><a href=""><img src="" width="" height="" alt=""></a></li> 　　<li><a href=""><img src="" width="" height="" alt=""></a></li> 　　<li><a href=""><img src="" width="" height="" alt=""></a></li> </ol> 　において、ol li{display:inline-block;}にすると空白があきます。これは、HTMLの仕様【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )］よりに起因することが多いからです。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

css、liを「display:inline;」で横に並べたら“上下”に隙間が空いてしまいます。
苦しんでいます。宜しくお力をお貸し下さい。　以下のように、cssでリストを横に並べたら、liの上下に隙間が出来てしまいます。試しに、全てのmarginとpaddingに0を当てても改善されません。　よく言われる横方向に出来る隙間は理由が分かっていて、あえて間隔を空けているのですが、上下方向の隙間を無くしたいと思っています。　IE6では上下の隙間は空きませんでした。Ff2とNN7での問題なので、私の記述がおかしいのだと思うのですが、宜しくご指摘お願い致します。 <!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> <title>test</title> <style type="text/css"> /* ページ全体 */ * { margin: 0px; padding: 0px;} body { background-color: powderblue;} /* ロアナビゲーション */ div#lowernavigation { width: 700px; clear: both; background-color: white; border-top: solid 1px mediumpurple;} div#lowernavigation ul { text-align: center; background-color: red;} div#lowernavigation li { font-size: x-small; list-style-type: none; line-height: 0.5em; display: inline; margin: 0px 3px; background-color: orange;} div#lowernavigation a { color: mediumpurple; text-decoration: none;} </style> </head> <body> <div id="lowernavigation"> <ul> <li><a href="link1.html" title="link1">link1</a></li> <li><a href="link2.html" title="link2">link2</a></li> <li><a href="link3.html" title="link3">link3</a></li> <li><a href="link4.html" title="link4">link4</a></li> <li><a href="link5.html" title="link5">link5</a></li> <li><a href="link6.html" title="link6">link6</a></li> <li><a href="link7.html" title="link7">link7</a></li> <li><a href="link8.html" title="link8">link8</a></li> <li><a href="link9.html" title="link9">link9</a></li> <li><a href="link10.html" title="link10">link10</a></li> <li><a href="link11.html" title="link11">link11</a></li> </ul> </div> </body> </html>
- ベストアンサー
- CSS
CSSでリストを横並びにし、行頭画像を表示させたい
XHTMLとCSSでのWebページを作成しています。リストを横並びに表示、行頭画像も表示させ、さらにポイントした時に画像が変わるようにしたいのですが、下記の記述では横並びにはできても画像が表示されず困っています。おかしい部分や足りない部分がありましたら、ご指摘お願い致します。 ≪CSS≫ #menu li{ display:inline; list-style-image:url(画像のパス); } #menu li a:hover{ list-style-image:url(画像のパス); } ≪ｈｔｍｌ≫ <div id="menu" name="menu"> <ul> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> </ul> </div> 試しにdisplayを削除すると、画像はちゃんと表示されるので、画像のパスは間違っていないはずです。何卒、宜しくお願い致します。
- ベストアンサー
- CSS
<li>タグの隙間が消えない
cssでhtmlのレイアウトを調整し、float:left;で<li>タグを水平方向に並べています。この時、「見た目では隙間は埋まっている」のですが、onmouseoutの処理を記述している場合、どうしても<li>タグの間に見えない隙間が生じて、そこにマウスカーソルを合わせるとonmouseoutの処理が走ってしまいます。この見えない隙間は埋められるのでしょうか？　詳しい方、よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!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" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
Firefox2.0における5ｐｘのずれ
下記の記述（原因部分のみ一部抜粋）において、Firefox2.0では#menu部分が5px上にずれ込む現象が起こるようなのですが、どこが原因なのかわからずに困っております。対処方法ご存知の方がおられましたらご教授願います。 XHTML <div id="menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu6</a></li> </ul> </div> CSS #header,#menu,#contents,#footer { width: 950px; margin: 0px 25px; clear: both; } #menu { height: 50px; } #menu ul li,#footer ul li { display: -moz-inline-box; /* firefox2.0以前対策 */ display: inline-block; /display: inline; /* ie6,7対策 */ /zoom: 1; /* ie6,7対策 */ } #menu ul li { width: 156px; height: 22px; text-align: center; margin: 0px; padding: 13px 0px; list-style: none; border: solid 1px #333333; } もしかしたら某サイトで発見した記述であるdisplay部分が問題かとも思うのですが、どうぞよろしくお願いいたします。
- 締切済み
- HTML
ボタンのa:activeの画像が表示されません
●質問させて頂きます。cssで指定したa:activeの画像が表示されません。 html <ul> <li class="sogo"> <a href="index.html">●●</a> </li> <li class="kinri"> <a href="kinri.htmi">●●</a> </li> <li class="shinsa"> <a href="shinsa.html">●●</a> </li> <li class="gendo"> <a href="gendo.html">●●</a> </li> <li class="raiten"> <a href="raiten.html">●●</a> </li> </ul> css 　● >996 付け足しです。関係あるかわかりませんが、書いたcssの上に次のようなソースもあります。 css .sogo { background-image: url("../images/sogo.jpg"); display: inline; height: 45px; text-indent: -9999px; width: 180px; .sogo a { background-image: url("../images/sogo.jpg"); display: block; float: left; height: 45px; text-indent: -9999px; width: 180px; } .sogo a:hover { background-image: url("../images/sogo_on.jpg"); } .sogo a:active { background-image: url("../images/sogo_on.jpg"); } このように指定すると、a:hoverでは画像が変わるのですが、a:activeではaの画像のままです。どうぞご教示ください。
- ベストアンサー
- CSS
リンクを横に並べるには、どうすればいいですか？
リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか？　　　リンク1（中央揃え）　　　リンク2（右揃え）なぜか、下記のようになってしまいます。リンク1（中央揃えにしたいのに、左揃え状態）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　リンク2（右揃えになっているけど、改行されてしまう） margineかpaddingで設定するしかないでしょうか？文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。よろしくお願いします。 /*---------- CSS部分（外部スタイルシートに記述） ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="～○○">リンク1</a></div> <div id="right"><a href="～○○">リンク2</a></div> </div>
- ベストアンサー
- CSS
ボックス間の隙間をなくしたい。
親ボックス[wrap]に配置された、子ボックス[exam1],[exam2],[exam3] の<span></span>に囲まれた”文字を”消すための記述、（子ボックスには本来画像が配置され、文字はaltの役割として記述してあります。） #wrap a span { display:none; } をしますと、「IE」において、数ピクセルの隙間が出来てしまいます。 [Firefox]ではその様な事はありません。隙間をなくしたいのですが、どなたか、CSSなどに詳しい方、アドバイスをいただけますでしょうか。 ※尚、文字を”消す”方法として「text-indent」などは使用しないとします。よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN''http://www.w3.org/TR/html4/strict.dtd'> <head> <title>隙間をなくしたい</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> ul{ margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } body { margin: 0px 0px 0px 20px; } #wrap{ width:300px; height:400px; margin-top:20px; padding-left:20px; border: 1px #1071F5 solid; } .exam1 a,.exam2 a,.exam3 a{ display:block; height:50px; width:200px; margin-top:0px; border: 1px #FD0101 solid; } /* この下記の行を有効にすると隙間が開く */ #wrap a span { display:none; } </style> </head> <body>  <div id="wrap"> <ul> <li class="exam1"><a href="exam.html"><span>exam1</span></a></li> <li class="exam2"><a href="exam.html"><span>exam2</span></a></li> <li class="exam3"><a href="exam.html"><span>exam3</span></a></li> </ul> </div> </body> </html>
- 締切済み
- Windows Vista
「横並び」にする方法→HTML&CSS
HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper">  <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li { 　　　　display:inline; 　　　　list-style-type: none; 　　　　padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか？非常に困っております。回答よろしくお願いします。
- ベストアンサー
- HTML
画像にリンクを張ったら、レイアウトが崩れました。
ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。まず、リンクを張らずにやってみました。 HTML部分 <ul id="main_center"> <li id="1"><img src="http://***.jpg" /></li> <li id="2"><img src="http://***.jpg" /></li> <li id="3"><img src="http://***.jpg" /></li> </ul> CSS部分 #main_center #1,#2,#3 { display: block; width: 220px; height: 20px; list-style-type: none; margin-bottom: 10px; } タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、 <ul id="main_center"> <li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li> </ul> といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。または、なにかタグが間違っているのでしょうか。どなたかアドバイスをお願いいたします。
- ベストアンサー
- HTML