< div>后台隐藏，当我使用“float：left”在< li> - 菜单 [英] <div> background hide when I use "float: left" on <li> - menu

问题描述

查看代码，以下代码是我的问题。）

See code, below code is my question ;).

HTML：

<div class="header">
    <ul>
        <li><a href="#">Domov</a></li>
        <li><a href="#">O nás</a></li>
        <li><a href="#">Služby</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</div>

CSS：

.header {
    width: 1000px;
    margin: auto;
    margin-top: 8px;
}

.header ul {
    list-style-type: none;
    background: #363b40;
}

.header ul li {
    float: left;
}

.header a {
    color: #a3a7a6;
    text-decoration: none;
}

我的问题是为什么DIV后台隐藏时，我添加float：left .header ul li。任何解决方案都可以吗？

My question is why DIV background hide when I add "float: left" to .header ul li. Any solution please?

推荐答案

发生的原因是因为 ul 是折叠，因为它没有任何定义的维度。当您浮动子元素时，它将它们从文档的流中移出。

The reason this is occurring is because the ul is collapsing, as it doesn't have any defined dimensions. When you float the children elements, it takes them out of the flow of the document. The same thing happens when you set their position to absolute.

你有几个选项..

设置 overflow：hidden 在父项上，强制其包含子项。

Set overflow:hidden on the parent, forcing it to contain the children.

jsFiddle示例

.header ul {
    overflow: hidden;
}

...或者在 ul 。

jsFiddle示例

.header ul {
    height: 20px;
}

这篇关于< div>后台隐藏，当我使用“float：left”在< li> - 菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！