1

コードを参照してください。以下のコードは私の質問です;)。

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

私の質問は、.header ul li に「float: left」を追加すると、DIV の背景が非表示になる理由です。解決策を教えてください。

4

2 に答える 2

3

これが発生する理由はul、定義された寸法がないため、 が崩壊しているためです。子要素をフロートすると、ドキュメントのフローから除外されます。位置を絶対に設定すると、同じことが起こります。

いくつかのオプションがあります..

親に設定overflow:hiddenし、強制的に子を含めます。

jsFiddle の例

.header ul {
    overflow: hidden;
}

...または に定義された高さを設定しulます。

jsFiddle の例

.header ul {
    height: 20px;
}
于 2013-11-04T19:41:48.413 に答える