0

「#header ul li」を左にフロートに設定すると、黄色のストライプ (#header) が消えるのはなぜですか? ? 「#header ul li」の固定サイズを設定したので、li 要素が並んで配置されることを期待します。3 * 100px は、ページ全体に水平に広がる #header をカバーするには十分な幅ではありません。

HTML:

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#header {
    background: yellow;
}
#header ul {
    list-style-type: none;
}
#header ul li {
    background: pink;
    width: 100px;
    float: left; // <--- here!
}
</style>
</head>
<body>
<div id="header">
<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>

</ul>
</div>
</body>
</html>
4

3 に答える 3

1

フローティング要素はコンテンツ フローから除外されるため、次のようになります。

フロートは流れの中にないため、フロート ボックスの前後に作成された配置されていないブロック ボックスは、フロートが存在しないかのように垂直方向に流れます。ただし、フロートの横に作成された現在および後続の行ボックスは、必要に応じて短縮され、フロートのマージン ボックス用のスペースが確保されます。

<div style="clear:left;"></div>これを修正するには、次を使用する必要があります。

<div id="header">
<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>
<div style="clear:left;"></div>
</div>
于 2013-01-11T21:41:56.750 に答える
0

子要素をフローティングする場合overflow:auto;は、親に設定して、幅と高さをカバーするように展開する必要があります。

jsFiddle の例

#header {
  background: yellow;
  overflow:auto;
}
于 2013-01-11T21:41:42.167 に答える
-1

li をフローティングしてドキュメント フローから除外しているため、ul に明示的な高さを設定するか、明確な div を使用して #header の高さを ul を超えて「プッシュ」する必要があります。

<div id="header">
    <ul>
    <li></li>
    </ul>
<div class="clear"></div>
</div>

.clear {clear:both;}

jsFiddle http://jsfiddle.net/QHrwZ/1/

于 2013-01-11T21:42:28.667 に答える