<li>リストタグの直下のdivブロックの高さ

質問

CSSのコーディングで困っている箇所があり、教えていただきたく質問させていただきます。

以下のようなhtmlを書いています。

<div id="a">
<li class="a"><a href="05.html">あいうえお</a></li>
<li class="a"><a href="06.html">かきくけこ</a></li>
<li class="a"><a href="07.html">さしすせそ</a></li>
</div>

このhtmlの直下にdivで囲ったブロックを入れると、
リストの部分の高さが認識されず、divの内容が上にはみ出て重なってしまいます。

このhtmlの直下に<p>&nbsp;</p>やテーブルを置くと、
きちんと配置されています。

<p>&nbsp;</p>を置けば問題ないのですが、
他に何かうまい方法はあるのでしょうか？

よろしくお願い致します。

回答No.1

play_with_you · ベストアンサー

とりあえず<ul>か<ol>か知らんけどちゃんと正しくマークアップ書いてからにしましょうね。

回答No.3

ORUKA1951

＞以下のようなhtmlを書いています。
　HTMLと大文字で書きましょう!!(Hyper Text Markup Languageの略です)
　ありえない、HTMLです。liは、<ol>ないし<ul>内にしかおくことができません。ブラウザは何とか表示しようと前後に<ol>などを追加して解釈しますが、その解釈は決められていませんから、期待通りにならないことが多いです。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』

　まずHTMLを書いたら
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　のDATA入力(右上)などで、HTMLが正しいことをチェックしてからスタイルシートを書きましょう。

＞このhtmlの直下にdivで囲ったブロックを入れると、
　htmlの直下には、headとbodyしか入りません。
html
　|-- head
　|　　|-- title
　|　　|-- meta
　|　　・・・略・・
　|-- body
　|　　|-- ul
　|　　|　　|-- li
　|　　|　　|　　-- div　liにはdivを含むことが出来る。
　直下とは、DOM構造上の樹構造の直系の子孫と言う意味です。

＞divで囲ったブロックを入れると、
　divは意味のないブロックですが、<p>やtableと同様ブロック要素ですから、そのような差が出ることは考えられません。他の部分で間違っている。

<li class="a"><a h
　のようにいちいちclassをつけるべきではありません。例えばナビゲーションブロックのulにおけるli要素でしたら
div.nav ul li{}
　で簡単に選択できるはずです。

　いずれにしても、スタイルシートの前に、正統なHTMLが書けるようになったほうが、はるかに早道ですよ。

回答No.2

naokita

<div id="a">
<ul>
<li class="a"><a href="05.html">あいうえお</a></li>
<li class="a"><a href="06.html">かきくけこ</a></li>
<li class="a"><a href="07.html">さしすせそ</a></li>
</ul>
</div>
<div style="clear:both;"><p>＞このhtmlの直下にdivで囲ったブロックを入れると、</p></div>

まあ、#1さんの言う通りなのですが・・・
恐らく、リストをfloatにしているので、次の要素のdivの行き場が困った事になっている・・・
または、positionが重なっている。
HTMLもCSSも間違っているという事です。