- 締切済み
画像の回り込みとリストの関係
画像にalign=leftをつけて、回り込み可能にしています。 画像の後ろにテキストを打ち込むと、きちんと右側に表示されます。 画像の縦幅よりオーバーした文字列は、きちんと画像下部以降へ表示されます。 （関係ないですが、hspace（？）で上下余白を5px程度指定しています） さて、私が質問したいことなんですが そのテキストの形が、 <UL> <LI>A</LI> <LI>B</LI> </UL> というような、リストの場合、通常のテキストのように 右側に回りこむのですが、インデントがうまくいっていないように思います。 （●部分が画像の下に隠れる（FireFoxだと上に被る）） テーブルを組んで、画像と引き離すことも考えましたが 画像の縦幅を越したテキストは画像の下部に表示させたいので断念しました。 リスト形式にしないで、「・」と手打ちで作ることも考えましたが ・ああああああ（略）ああああ（自動折り返し地点） あああああああ（略） となってしまうことに不満があります。（原稿に忠実にしなければいけなくて…） リストを使うことで、行頭を同じインデントにしたいのです。 分かりにくい説明ではありますが何か回避方法があれば、お教えください。 必要であれば補足もさせていただきます。 よろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- idhokanohi
- ベストアンサー率45% (9/20)
関連するQ&A
- リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- 締切済み
- HTML
- listアイコン画像だけが中央揃えにならない
listタグでリスト化したリンクを、中央揃えするように指定したdivで囲んでいるのですが リストアイコンの画像だけが中央揃えになってくれません。（添付画像参照） HTMLとCSSは以下の通りです。 <div class="box"> <ul class="list01"> <li>テキスト</li> <li>テキスト</li> </ul> </div> .box { text-align:center; } ul.list01 { list-style-image: url(～); } リストアイコンの画像もテキストと一緒に中央揃えにしたいのですが、 何かやり方があるのでしょうか？ どなたかよろしくお願いします。
- ベストアンサー
- ブログ
- リストに画像入れると
<ul> <li><img src=…><li> <li><img src=…><li> </ul> のようにすると、IE6.0で、リストに行間が発生します。Netscape7だと画像はぴったりとくっついて並ぶのです。 IEでぴったりとくっつくにはどうしたらいいですか？
- ベストアンサー
- HTML
- MTのリストマークが消えない！！！
MTでブログ作成をしてます。 ３カラムのメインページの左サイドにリストメニューを置き、リストマークを画像に消したいのですが、どうしてもできません。 ＃メイン <div id="links-left-box"> ～略～ <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> ～略～ </div> ＃スタイルシート #links-left-box ul{ list-sytle-type:none; } お手数ですが、どなたかお教えいただければ幸いです。
- ベストアンサー
- ブログ
- [正規表現][入れ子]ネストされたリストをインデントに置換したい
[正規表現][入れ子]ネストされたリストをインデントに置換したい preg_replaceかpreg_replace_callbackを使って、 ネストされたリストタグを全角空白によるインデントに書き換えたく思っています。 （携帯表示するため） 1階層目のliならインデントひとつ。 2階層目のliならインデントふたつ。 ・ ・ ・ という具合にしたいのです。 以下は全角空白をわかりやすくするために□で置き換えました。 ---------------------------------------------------------------------------- 【現在のHTML】 文章1 文章2 <ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul> <ul> <li> <ul> <li>リストあ</li> <li>リストい</li> <li>リストう</li> </ul> </li> </ul> ---------------------------------------------------------------------------- 【置換完了後のブラウザ表示】 文章1 文章2 □リストA □リストB □リストC □□リストあ □□リストい □□リストう ---------------------------------------------------------------------------- 【置換完了後のHTMLのイメージ】 文章1 文章2 <div> <div>□リストA</div> <div>□リストB</div> <div>□リストC</div> </div> <div> <div> <div> <div>□□リストあ</div> <div>□□リストい</div> <div>□□リストう</div> </div> </div> </div> ---------------------------------------------------------------------------- どうぞ、よろしくお願い致します。
- ベストアンサー
- PHP
- リストの一つの項目のみの右側に画像を表示させたい
リストの一つ項目のみの右側に画像を表示させたいのですが、どうすれば良いのでしょうか？ 具体的には自分のサイトの既存のリストに新しい項目を付け加えた時にその後ろに"new"を表す画像を表示させたいのですが。(下記■の部分に） ・りんご ・バナナ ・みかん ・メロン■ 出来ればCSSで設定したいです。 htmlに直接画像を貼り付けても良いのですが、そうすると画像を貼り付けた行の前後だけline-heightが狂って（狭くなる）しまいます。これが解決できればhtml内への記述でも構いません。 **html** <ul> <li><a href="a.html">りんご</a></li> <li><a href="b.html">バナナ</a></li> <li><a href="c.html">みかん</a></li> <li><a href="d.html">メロン</a></li> </ul> ******************* **CSS** ul{ line-height: 170%; margin:0px; padding:0px 0px 30px 20px; } ****************** liに対して背景画像とその位置をpaddingで設定してやるのかなと考えましたが上手くいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 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
- リスト内での画像の下部揃え
下記のように、上部テキスト下部画像の組み合わせで、横並びでリストを作りました。 テキストの量に合わせて、画像が上下するので、見栄えが悪いです。それをテキストは そのままの位置で、画像は下部でそろえたいと思います。それが不可能な場合 せめてすべて下部で合わせたいです。 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
- CSSでのリスト内のある特定のアイテムだけを表示しない方法
お世話になっております。 CSSを使用して、リストを作った場合の質問です。 リストが12個あったとして、 実際にはそのリストの中の8個しか表示したくない場合 現在では <ul> <li>画像1</li> <li>画像2</li> <li style="display:block;">画像3</li>（←表示したくない画像） <li>画像4</li> ・・・・・ ・・・・・ </ul> という風に記述しているのですが・・・ 表示されてしまいます。 どなたかご存知のかた、 教えてください。 宜しくお願いします！！
- ベストアンサー
- HTML
- リスト（ul / li）タグの左インデントの解除
HTML、CSSの初心者です。 リスト（ul / li）タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。
- 締切済み
- HTML
お礼
自分の中でOLかLIにmarginをつけることしか 考えてなかったので、貴重な回答でした。 完璧にできたわけではないですが、ひとまず教えてくださった方法で回避してみました。ありがとうございました。
補足
早速の回答ありがとうございます。 一つ、説明不足でした。テキスト内にリスト部分とそうではない部分があるのです。 リスト部分はインデントさせたいが、その他テキストはそのままがいい！ というとても我侭な要望でして、頭をひねらせております。 しかしながら、大変貴重な回答、ありがとうございました！