html - div が ul と li の中に収まらない

Question

重複の可能性:
オーバーフローの隠し要素がフローティング要素をコンテナから逃れるのを止めるのはなぜですか?

ul と li の中に div 要素が表示されないのはなぜですか? ブロックであると設定した場合、li がインライン要素として機能するのはなぜですか? このコードを見てください: http://jsfiddle.net/jNkZP/

Answer 1

あなたdivの は の中に浮かんでいliます。エレメントにフローティング オブジェクトしか含まれていない場合、エレメントは折りたたまれます。もっと雄弁に言えば：

フロートが、目に見える境界線または背景を持つコンテナー ボックス内に含まれている場合、フロートの高さが高くなっても、そのフロートはコンテナーの下端を自動的に押し下げることはありません。代わりに、フロートはコンテナによって無視され、旗のようにコンテナの底からぶら下がっています。Explorer for Windows にしか慣れていない人は、頭を悩ませて「それは違います」と言うかもしれません。確かに、IE/Win は float をコンテナー内に「自動的に」囲みますが、それはコンテナー要素が hasLayout と呼ばれる MS 専用の品質を持っている場合のみです。

http://www.positioniseeverything.net/easyclearing.html

解決策: clearfixまたはその代替手段を調べてください。

たとえば、私overflow: hidden;は自分の主張を実証していました: http://jsfiddle.net/jNkZP/23/

#QuadroEvento ul.ListaDadosEvento li{
    display: block;
    position: relative;
    background-color: #722827;
    outline: blue solid 1px;
    overflow: hidden;
}

Answer 2

スパンに置き換える

<div class="QuadroPrincipal">
<div id="QuadroEvento">

    <ul class="ListaDadosEvento">
        <li>

                <span class="label">Descrição:</span>
                <span class="dados">@ev</span>

        </li>
        <li>
                 <span class="label">Descrição:</span>
                <span class="dados">@ev</span>

        </li>
    </ul>
    </div>
</div>
</div> 

css から float left を削除する

 #QuadroEvento ul.ListaDadosEvento div.label{
        text-align: right;
        font-weight: bold;
        min-width: 100px;outline: black solid 1px;
    }
    #QuadroEvento ul.ListaDadosEvento div.dados{
        padding-left: 5px;
        text-align: justify;
        outline: black solid 1px;
    }​

Answer 3

li に div などのブロック要素を含めることはできません。span に変更してください

<div class="QuadroPrincipal">
<div id="QuadroEvento">

    <ul class="ListaDadosEvento">
        <li>

                <span class="label">Descrição:</span>
                <span class="dados">@ev</span>

        </li>
        <li>
                <span class="label">Local:</span >
                <span class="dados">@ev</span >

        </li>
    </ul>
    </div>
</div>
</div>