- 締切済み
表とリスト付き順序を両立させることはできますか？
順序付きリストがついた、表を作りたいと考えてます。 現在は、その方法の一つとしてブロック要素をcssで表化し順序付きリストを その表の列の左側に表示するというようにしたいと考えていました。 図で表すとこうなります。 A枠 B枠 ------------------------------- |1. (A1) | (B1) | ------------------------------- |2. (A2) | (B2) | ------------------------------- |3. (A3) | (B3) | ------------------------------- このようにリストno.100程度まで続く・・ 問題点は ブロック要素を使用すると、リスト付き順序が初期化されてしまうということです。 {(A2)の横には「2.」と着てほしいところが初期化されたため「1.」と表示される} どのようにすれば、表とリスト付き順序を共存させることができますか？ もしくは他の方法で、表とリスト付き順序を共存させることができますか？
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そもそものHTMLのマークアップが示されていないのでCSSは示すことが不可能です。 HTML/CSSで重要なことは、「HTMLが文書構造にしたがって正しくマークアップされているか」です。 (A1)～(A100)，(B1)～(B100)はそもそもどんな要素(Element)なのでしょう。 最も簡単なのは、Lynxなどのテキストブラウザで表示させてみるとか・・ <dl>・・・定義リスト・・・ <dt>A1</dt> <dd>B1</dd> ・・・・・ </dl> あるいは <div> <h3>A1</h3> <div> <p>B1</p> </div> </div> 上記いずれでも、あるいは他のマークアップでも期待通りのプレゼンテーションはできます。ただし、HTML(Hyper Text Marup Lungage)の文字通り正しくマークアップされていればということです。 スタイルシートを適用する前の文書の構造に従ったマークアップを提示してください。
- Yama-tani
- ベストアンサー率44% (13/29)
>ブロック要素をcssで表化し順序付きリストをその表の列の左側に表示する を可能の文章構造的に解釈すると、まずはリストがあり、その中にブロック要素を入れると取れます。 olの直接の子はliでないと駄目ですし、olが親を飛び越えることはできません。 こんな感じでいかがでしょう。 css ----------- ol{width:20em;} div{float:right;} div div{width:10em;float:left;} html ----------- <ol> <li><div> <div>(A1)</div> <div>(B1)</div> </div></li> <li><div> <div>(A2)</div> <div>(B2)</div> </div></li> <li><div> <div>(C1)</div> <div>(C2)</div> </div></li> </ol>
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかってませんが、こんなんじゃダメなのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .column { width:200px; float:left; } ol { margin: 0; padding: 0; line-height: 1.5em; list-style: none; border-top: 1px solid #888; } ol.first { list-style: decimal inside; border-left: 1px solid #888; } ol li { padding-left: 1em; border-right: 1px solid #888; border-bottom: 1px solid #888; } </style> </head> <body> <div class="column"> <ol class="first"> <li>A1</li> <li>A2</li> <li>A3</li> <li>A4</li> </ol> </div> <div class="column"> <ol> <li>B1</li> <li>B2</li> <li>B3</li> <li>B4</li> </ol> </div> </body> </html>
