- 締切済み
リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- みんなの回答 (4)
- 専門家の回答
関連するQ&A
- リスト(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
- 画像の回り込みとリストの関係
画像にalign=leftをつけて、回り込み可能にしています。 画像の後ろにテキストを打ち込むと、きちんと右側に表示されます。 画像の縦幅よりオーバーした文字列は、きちんと画像下部以降へ表示されます。 (関係ないですが、hspace(?)で上下余白を5px程度指定しています) さて、私が質問したいことなんですが そのテキストの形が、 <UL> <LI>A</LI> <LI>B</LI> </UL> というような、リストの場合、通常のテキストのように 右側に回りこむのですが、インデントがうまくいっていないように思います。 (●部分が画像の下に隠れる(FireFoxだと上に被る)) テーブルを組んで、画像と引き離すことも考えましたが 画像の縦幅を越したテキストは画像の下部に表示させたいので断念しました。 リスト形式にしないで、「・」と手打ちで作ることも考えましたが ・ああああああ(略)ああああ(自動折り返し地点) あああああああ(略) となってしまうことに不満があります。(原稿に忠実にしなければいけなくて…) リストを使うことで、行頭を同じインデントにしたいのです。 分かりにくい説明ではありますが何か回避方法があれば、お教えください。 必要であれば補足もさせていただきます。 よろしくお願いいたします。
- 締切済み
- HTML
- [正規表現][入れ子]ネストされたリストをインデントに置換したい
[正規表現][入れ子]ネストされたリストをインデントに置換したい 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
- HTMLタグ リストの入れ子とNetscapeについて
HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ(IE8、Opera、Safari、FireFox)では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか? それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。
- ベストアンサー
- HTML
- リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法は?
HTMLの<li>タグでリスト文章をつくるとき、list-style-positionでoutsideにしているボックスの外にリストマーカーが配置されてしまうので論外ですし、かと言ってinsideにしても<li>タグ内の文章の二行目以降がリストマーカーと同列に配置されてしまい、<li>内の文章よりも左側にリストマーカーがはみ出してくれないのでリストマーカーが<li>内の文章に埋没してしまって見にくくて困っており、回避策を探しております。 リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法はないのでしょうか? 【現在の問題な状態】 ● list-style-positionをoutsideにした場合:リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合:リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 【希望する正しい状態】 ● list-style-positionをoutsideにした場合:リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合:リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 宜しくお願いいたします。
- 締切済み
- HTML
- インデントについて
基本的な質問ですが、リストのインデントの仕方について皆さまはどうされていらっしゃいますか? リストの中の1行をインデントする場合に前の行の終了タグ</li>の前に新規リスト<ul><li>hoge</li></ul></li>を入れれば表示上は改行されますが、リストの行の中に新規リストを入れるのはマークアップ上正しいのでしょうか? また、段落のインデントは段落の前後にblockquoteを入れてインデントをかけるという方法もありますが、引用文でもないものを表示効果のねらいでblockquoteを使うのは正しいのでしょうか? いずれも、各行内にクラスを割り当ててCSSでマージンを設定する方が妥当なのでしょうか?
- ベストアンサー
- HTML
- MTのリストマークが消えない!!!
MTでブログ作成をしてます。 3カラムのメインページの左サイドにリストメニューを置き、リストマークを画像に消したいのですが、どうしてもできません。 #メイン <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; } お手数ですが、どなたかお教えいただければ幸いです。
- ベストアンサー
- ブログ
- リストの回り込みについて(マーカーの位置がずれます
助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。
- ベストアンサー
- HTML
- cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> <ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS(親リストの指定) ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、 入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。 システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。 入れ子のulには、subとつけて、試行錯誤しているのですが、 どうしても背景画像が反映してしまって・・・。 ご教示ください。 よろしくお願いします。
- 締切済み
- HTML
- リストの高さを揃えたい
リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。 左のセルには5行、右のセルには4行あります。 右側が1行少ないことで、左右で高さが異なってしまいます。(図があります) どうも、右側のリスト全体がセルの中央に配置されている感じがします。 左右で高さを揃えたいのですが、その方法を教えてください。 HTMLとCSSは以下のとおりです (HTML) <table> <tr> <td class="sample"><ul> <li>ABC</li> <li>DEF</li> <li>GHI</li> <li>JKL</li> <li>MNO</li> </ul> </td> <td class="sample"><ul> <li>PQR</li> <li>STU</li> <li>VWX</li> <li>YZA</li> </ul> </td> </tr> </table> (CSS) .sample{ text-align: left; valign: top; padding: 0px; border: none; }
- ベストアンサー
- CSS
- HL-L3230CDWの年賀状印刷において、用紙サイズをはがきに設定しているにもかかわらず、A4サイズに拡大される問題が発生しています。
- お使いの環境はWindows11で、プリンターはbluetoothで接続されています。
- ご質問はブラザー製品に関するものです。お困りの問題を詳しく教えてください。
お礼
ありがとうございました。 参考にさせて頂きます。