html - div 不适合 ul 和 li

Question

可能重复：
为什么溢出隐藏会阻止浮动元素逃离其容器？

为什么我的 div 元素没有显示在我的 ul 和 li 中？如果我设置它是块，为什么我的 li 充当内联元素？看看这段代码：http: //jsfiddle.net/jNkZP/

Answer 1

您div的 s 漂浮在lis 内。当一个元素只包含浮动对象时，它就会折叠。更雄辩地说：

当浮动包含在具有可见边框或背景的容器框中时，该浮动不会自动强制容器的底部边缘向下，因为浮动变得更高。相反，浮动会被容器忽略，并且会像旗帜一样从容器底部垂下。那些只熟悉 Windows 资源管理器的人可能会摸不着头脑说“这不对！” 诚然，IE/Win 确实会“自动”在容器中包含一个浮点数，但前提是容器元素恰好具有称为 hasLayout 的 MS-only 质量。

http://www.positioniseverything.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

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>  

Answer 3

替换为跨度

<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中删除左边的浮动

 #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;
    }​