- ベストアンサー
箇条書きで表される点がずれる（liタグ）
HTMLで箇条書きタグ <ul> <li>箇条書き一列目</li> <li>箇条書き二列目</li> <li>箇条書き三列目</li> </ul> のタグをブラウザで見てみると ・箇条書き一列目 ・箇条書き二列目 ・箇条書き三列目 と、いうように三列目がずれてしまっています。三列目がずれないようにしたいと思っています。 タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。 どなたか教えていただけたらと思います。
- shige077
- お礼率66% (40/60)
- ホームページ作成ソフト
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
提示いただいたソースでも、ずれなかったです。 考えられるのは、やっぱりfloatだと思うんですけど、 ページ全体のレイアウト等でのfloatは使っていませんか？ *html* <div style="float:left;"> や *css* {float: left} 【例】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- html,body{height: 100%;} #zentai {height: 100%;} #b { width:30%; background-color: silver; float: left; } #c { margin-left: 30%; background-color: #e8e8e8; } dl.aaa { margin: 0em 0em 3em 1em; } dl.aaa dt{ background: #aaa url(../common_images/b.gif) no-repeat left center; padding: 0px 0px 0px 10px; margin: 0.5em 0em 0em 0em; } dl.aaa dd{ border-bottom: 1px dashed #808080; padding: 0em 0em 0.5em 0em; } dl.aaa dd ul{ padding: 0px 0px 0px 30px; list-style-type: disc; color: #0000ff; } dl.aaa a{ color: #808080; } --> </style> </head> <body> <div id="zentai"> <div id="b"> <p>えへへ</p><p>えへへ</p> </div> <div id="c"> <dl class="aaa"> <dd> <ul> <li><a href="quality.html#qi1">箇条書き一行目</a></li> <li><a href="quality.html#qi2">箇条書き２行目</a></li> <li><a href="quality.html#qi3">箇条書き３行目</a></li> <li><a href="quality.html#qi4">箇条書き４行目</a></li> <li><a href="quality.html#qi5">箇条書き５行目</a></li> <li><a href="quality.html#qi5">箇条書き６行目</a></li> </ul> </dd> </dl> </div> </div> </body> </html> この場合、箇条書き5行目からずれていると思います。 #b { width:30%; background-color: silver; float: left; } これにheight: 100%;を足すとずれが無くなります。 一度ご確認ください。
その他の回答 (3)
- awasumi
- ベストアンサー率41% (23/56)
＃2の訂正です・・・。 </dd>が抜けているのと、 dl.aaa dd ul{ padding: 0px 0px 0px 30px; list-style-type: disc; color: #999999; } この部分を自分の見やすい色に変更したまま載せてしまいました・・・。
補足
#2の補足の訂正です。 １） <dt><a href="ranking.html">あああ</a></dt> <dd></dd> は、関係がないタグです。 ２） <li><a href="quality.html#qi4">箇条書き４行目a></li> ”箇条書き４行目”を記入するときに</a>を書き間違えました。
- awasumi
- ベストアンサー率41% (23/56)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title></title> <style type="text/css"> <!-- dl.aaa { margin: 0em 0em 3em 1em; } dl.aaa dt{ background: #aaa url(../common_images/b.gif) no-repeat left center; padding: 0px 0px 0px 10px; margin: 0.5em 0em 0em 0em; } dl.aaa dd{ border-bottom: 1px dashed #808080; padding: 0em 0em 0.5em 0em; } dl.aaa dd ul{ padding: 0px 0px 0px 30px; list-style-type: disc; color: #999999; } dl.aaa a{ color: #808080; } --> </style> </head> <body> <dl class="aaa"> <dt> <dd> <ul> <li>箇条書き一列目</li> <li>箇条書き二列目</li> <li>箇条書き三列目</li> ～略～ <li>箇条書き二十二列目</li> </ul> </dt> </dl> </body> </html> このような形ってことですよね？ 私のほうでは、ずれることなくきちんと表示されるので 違うところに原因があるかもしれません。。。 実際のHTMLのほうのソース（ul部分）も教えていただけるともうちょっと原因追求できるかもしれません。
補足
先ほどの補足から迅速なご回答に感謝しております。ありがとうございます。ソース部分を載せさせていただきます。 <dt><a href="ranking.html">あああ</a></dt> <dd></dd> <dt><a href="quality.html">いいい</a></dt> <dd> <ul> <li><a href="quality.html#qi1">箇条書き一行目</a></li> <li><a href="quality.html#qi2">箇条書き２行目</a></li> <li><a href="quality.html#qi3">箇条書き３行目</a></li> <li><a href="quality.html#qi4">箇条書き４行目a></li> <li><a href="quality.html#qi5">箇条書き５行目</a></li> <li><a href="quality.html#qi6">箇条書き６行目</a></li> <li><a href="quality.html#qi7">箇条書き７行目</a></li> <li><a href="quality.html#qi8">箇条書き８行目</a></li> <li><a href="quality.html#qi9">箇条書き９行目</a></li> <li><a href="quality.html#qi11">箇条書き１０行目</a></li> <li><a href="quality.html#qi12">箇条書き１１行目</a></li> <li><a href="quality.html#qi13">箇条書き１２行目</a></li> <li><a href="quality.html#qi14">箇条書き１３行目</a></li> <li><a href="quality.html#qi15">箇条書き１４行目</a></li> <li><a href="quality.html#qi17">箇条書き１５行目</a></li> <li><a href="quality.html#qi18">箇条書き１６行目</a></li> <li><a href="quality.html#qi19">箇条書き１７行目</a></li> <li><a href="quality.html#qi20">箇条書き１８行目</a></li> <li><a href="quality.html#qi21">箇条書き１９行目</a></li> <li><a href="quality.html#qi24">箇条書き２０行目</a></li> <li><a href="quality.html#qi25">箇条書き２１行目</a></li> <li><a href="quality.html#qi26">箇条書き２２行目</a></li> </ul> </dd>
- awasumi
- ベストアンサー率41% (23/56)
floatを使っていますか？ 左側のブロックが右側のブロックに流れ込むとリストも流れ込んで、このようにずれることがあります。 右側のブロックのmargin-left、または左側ブロックのheightを一度調整してみてください。
補足
ご回答ありがとうございます。 floatはこのCSSでは使っていないようです。 このようになっています。 ---以下ソースです--- dl.aaa { margin: 0em 0em 3em 1em; } dl.aaa dt{ background: #aaa url(../common_images/b.gif) no-repeat left center; padding: 0px 0px 0px 10px; margin: 0.5em 0em 0em 0em; } dl.aaa dd{ border-bottom: 1px dashed #808080; padding: 0em 0em 0.5em 0em; } dl.aaa dd ul{ padding: 0px 0px 0px 30px; list-style-type: disc; color: #0000ff; } dl.aaa a{ color: #808080; } --- margin padding の値を調整すればよいのでしょうか。 よろしければまたご回答お願いします。
お礼
上記コードを解析し、ｃｓｓと照らし合わせてみたら解決しました。 左側にあるフレームのfloatにheight；900px；とつけたし、プレビュー画面とにらめっこしましたら、ずれがなくなりました。 ほんとに有難うございます。 ここまで丁寧に付き合っていただき、感謝しております。