- 締切済み
リストタグを使ったレイアウトで困っています。
リストタグを使ったレイアウトで困っています。 olタグを使い、入れ子にしたdtタグに書かれた文字列に番号を降っています。 それを下記のようなレイアウトにしたいんです。 １．左側の内容 ２．右側の内容 ３．左側の内容 ４．右側の内容 ５．左側の内容 ６．右側の内容 単純に１、３、５を１つずつdivでまとめ、CSSでfloat: leftを指定して ２、４、６のdivと交互に書いてます。 すると、Firefoxではリストの番号がちゃんと１、２、３…と表示されたのですが IEでは全て１になってしまい番号が降れていませんでした。 CSS自体はfloatの指定しかしていません。 上記のようなレイアウトをしたい場合、このような考え方ではダメなんでしょうか？ htmlのソースは下記のような感じで書いてます。 <ol> <div id="left"> <li> <dl> <dt>左側</dt> <dd>左側の内容</dd> </dl> </li> </div> <div id="right"> <li> <dl> <dt>右側</dt> <dd>右側の内容</dd> </dl> </li> </div> </ol> どなたか分かる方いらっしゃいましたらアドバイスをお願い致します…！
- konakona084
- お礼率40% (4/10)
- HTML
- 回答数4
- ありがとう数18
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- rurino
- ベストアンサー率55% (38/68)
はじめまして。初回答です。 [CSS] （横幅が600px）として ol { margin: 0; padding: 0; } li { margin: 0 0 0 2em; padding: 0; width: 200px; float: left; } [HTML] <ol> <li>左上内容</li> <li>右上内容</li> <li>左中内容</li> <li>右中内容</li> <li>左下内容</li> <li>右下内容</li> </ol> <br style="clear: both;" /> とかだとだめでしょうか…？ 上に入れた数値は仮なので、サイトにあわせて調整してみてください。
- think49
- ベストアンサー率59% (285/482)
どうもよくわかりません…。 id="left", id="right" と付けているところからすると、左側と右側をカラム分けしたいように思えますが、 ---- 1.左側の内容 2.右側の内容 3.左側の内容 4.右側の内容 5.左側の内容 6.右側の内容 ---- このレイアウトを見る限りでは、floatレイアウトですよね？ ですので、 ------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=uft-8" /> <title>test</title> <style type="text/css"> ol,li{ margin: 0; padding: 0; } ol{ width: 500px; } li{ margin-left: 2em; width: 200px; float: left; } </style> </head> <body> <ol> <li>左側の内容1</li> <li>右側の内容1</li> <li>左側の内容2</li> <li>右側の内容2</li> <li>左側の内容3</li> <li>右側の内容3</li> </ol> </body> </html> ------ このようになると思うのですが…。 WinXP SP3 IE8にて、リストマーカーの番号は期待通りに表示されます。
お礼
お礼がとても遅くなってしまいましたが、回答ありがとうございました。
- metametamu
- ベストアンサー率51% (153/295)
olの子要素にdivは入れられないのでその辺りは修正した方がいいんじゃないかなと思います。 <ol> <li class="left"> <dl> <dt>左側</dt> <dd>左側の内容</dd> </dl> </li> <li class="right"> <dl> <dt>右側</dt> <dd>右側の内容</dd> </dl> </li> </ol>
お礼
お礼がとても遅くなってしまいましたが、回答ありがとうございました。
補足
回答ありがとうございます！ divは入れてはダメでしたね…！うっかりしてました。 教えていただいた、liにclass指定する方法でも、無理でした…。 このようなレイアウトができる方法、他にもあるんでしょうか…
- stpopo
- ベストアンサー率52% (13/25)
こんにちわ リストの番号が表示されないのはCSSバグみたいです。
お礼
お礼がとても遅くなってしまいましたが、回答ありがとうございました。
補足
うーん…一応番号は出るんですよね… 全て１ですが（笑） 回答ありがとうございます！
お礼
お礼がとても遅くなってしまいましたが、回答ありがとうございました。