- ベストアンサー
箇条書きリストのすぐ横に画像を載せたい
初心者です。よろしくお願いいたします。 表題のとおりなのですが、 <img src="gazou.jpg" width="100" height="100" align="right"> <ol> <li>りんご</li> <li>みかん</li> </ol> ・・・と記述すると確かに箇条書きリストの右側に画像が表示されるのですが画像が右端に表示されてしまいます(当然ですが・・・）箇条書きリストの少し横あたりに画像を表示させたいのですがなにか方法があるのでしょうか。このような微調整はむずかしいのでしょうか。 よろしくアドバイスお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
スタイルシートでボックスの枠を決めてしまい、そこに上記のソースを入れてしまうとか、テーブルで枠を切ってしまい、その枠内で画像を右に回り込ませると言った方法でも良いかと思います。 他にも方法はあるでしょう。 スタイルシートの場合： <div style="width: 300px;"> <img src="gazou.jpg" width="100" height="100" align="right"> <ol> <li>りんご</li> <li>みかん</li> </ol> </div> テーブルの場合： <table width="300"> <tr> <td> <img src="gazou.jpg" width="100" height="100" align="right"> <ol> <li>りんご</li> <li>みかん</li> </ol> </td> </tr> </table> 上記はいずれも幅300pxの表示領域を確保し、その枠の中で画像を右端に配置します。 上記のソースは端折って書いてあるものなので、スタイルシートとテーブルとで表示結果が若干異なります(テーブルの方がセル間のスペースを確保する分、枠が若干狭くなります。tableのcellpaddingとcellspacingを0に設定すれば、見かけ上はほぼ等しい表示になると思います)。 スタイルシートを使ってレイアウトするなら、他にもいくらか方法があります。 おそらく、スタイルシートを使った方が、HTMLだけで対処するよりもだいぶ自由にレイアウトを整えることができるのではないでしょうか。 参考まで。
お礼
お礼が遅くなりもうしわけありません。 そういうやり方があったんですね！ やってみます。助かりました！
- vamos_4wd
- ベストアンサー率51% (15/29)
関連するQ&A
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- リストの画像をくっつけたい！
教えてください。 <ul> <li><img src="../img/link_a.gif" /></li> <li><img src="../img/link_b.gif" /></li> <li><img src="../img/link_c.gif" /></li> </ul> と画像をリストにした場合、画像と画像の間にblankができてしまうのですが、これは仕方がないのでしょうか？ CSSでマージンを0pxにしても画像と画像がくっつきません。 #contentMenu li { width: 160px; height: 25px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } 教えてください。 よろしくお願いいたします。
- ベストアンサー
- XML
- リストタグに画像を入れた場合
リストタグに画像<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
- 画像と背景色の幅が合わない
画像サイズも設定しているのですが、なぜか画像の下にスペースが空きます。 vertical-alignを入れてみたのですが、解決しません。 問題なのは、 ・画像と画像の間にスペースが空く ・画像と画像のスペースの下に、下線が表示される（画像をよく見ていただければ分かると思います。） ・画像の下に空白ができる <HTML> <div class="gazou" align="center"> <nobr> <a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a> <a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a> 以下、同様に続く・・・ </nobr></div> <CSS> div.gazou { clear: both; background-color: #0099ff; vertical-align: text-bottom; } ※画像は改行なしで横並べ。 画像のサイズは正しく指定してあります。
- ベストアンサー
- CSS
- リスト内での画像の下部揃え
下記のように、上部テキスト下部画像の組み合わせで、横並びでリストを作りました。 テキストの量に合わせて、画像が上下するので、見栄えが悪いです。それをテキストは そのままの位置で、画像は下部でそろえたいと思います。それが不可能な場合 せめてすべて下部で合わせたいです。 display: inline-block; vertical-align: bottom; を記入しましたが、全く効果ありません。 どうすればよろしいのでしょうか？ HTML <body id="news" class="s"> <div > <ul class="u1" > <li><span class="time">テキスト</span> <div class="news_img"> <img src="hoge.jpg"> </li> </ul> </div> </body> CSS #news.s ul { padding: 10px; width: 100%; } #news.s li { float: left; width: 170px; height: 240px; padding:0 10px 8px 0; font-size: 12px; list-style: none; display:block; vertical-align: bottom; } #news.s li img { display: inline-block; vertical-align: bottom; border: solid 1px silver; width: 140px; height: 140px; max-width: 140px; max-height: 140px; } .news_img { display: table-cell; height: 160px; text-align: center; width: 160px; margin-top: 10px; } div.news_img div { /* IE 7 */ display: inline; zoom: 1; }
- ベストアンサー
- CSS
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで画像を中央に持っていく方法。
簡単な問題です。 画像を liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？ 画像のサイズがまちまちなので、 paddingなどで数値を指定するのは、NGです。 vertical-align:middleはだめでした。 text-align:centerで左右の中央に持って行く所まで、できました。 HTML ==================== <ul class="book_slide"> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> </ul> ====================== css ======================= ul.book_slide li{ float:left; height:114px; width:80px; border:1px solid #000; text-align:center; } =======================
- ベストアンサー
- CSS
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- 正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- HTML
- ie6 でリストが横に並ばず縦に並んでしまう
ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。 <div class="pic0"> <ul> <li class="pic1"><img src="images/pic1.jpg"/></li> <li class="pic1"><img src="images/pic2.jpg" /></li> <li class="pic1"><img src="images/pic3.jpg" /></li> <li class="pic1"><img src="images/pic4.jpg"/></li> <li class="pic1"><img src="images/pic5.jpg"/></li> </ul></div> .pic0{ width: 250px; height:40px; float: left; display:inline; padding-top: 10px; padding-bottom: 10px; overflow:hidden; } .pic1 li { float: left; height: 47px; width: 36px; display:block; margin-left:3px; margin-right:3px; } ie6のみ縦に並んでしまいます。 疑ったもの ・haslayout *{ zoom:1; } {line-height:0;} ・marginが倍になるバグ widthの指定 ・cssが効いていない ・ ネガティブマージン など ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。 雑文ですが、どうかお願いします。助けてください。
- ベストアンサー
- CSS
お礼
お礼が遅くなり申し訳ありません！ なるほど!!!!という感じで助かりました! ありがとうございました!