Question

可能重复：
Why does overflow hidden stop floating elements escaping their container?

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

Answer 1

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

当浮动包含在具有可见边框或背景的容器框内时，浮动不会自动强制容器的底边向下，因为浮动更高。相反，容器会忽略浮动，并像旗帜一样从容器底部垂下。那些只熟悉Windows操作系统的人可能会挠头并说“那不对！”没错，IE / Win会自动将一个浮点数自动包含在一个容器中，但前提是容器元素恰好具有名为hasLayout的仅MS质量。

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

解决方案：查看clearfix或其任何alternatives。

例如，我使用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

替换为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">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;
    }

div不适合ul和li

3 个答案: