0

私はとても混乱しています...コンテナ内にULがあり、ULの上のDIVを変更すると、ULの後のフローに影響を与えるようです...何が起こっているのですか?

DIV はブロック要素ですよね？ULもそうですよね？

したがって、この例では、「ヘッダー」DIV を削除すると、UL の後に H1 要素が表示される方法が変更されます...理由を教えてもらえますか?

私はIE8です...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Layout and CSS testing</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
        background-color: blue;
    }
    .container {
        margin-left: auto;
        margin-right: auto;
        width: 600px;
        background-color: green;
    }
    .navMenu {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        background-color: red;
    }
    .navMenu li {
        display:inline;
        float: left;
    }
</style>
</head>
<body>
<div class="container">
    <div class="header">
        <img src="images/picture.gif" width="600" height="100" id="headerpic" border="0" />
    </div>
    <ul class="navMenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Next</a></li>
        <li><a href="#">Last</a></li>
    </ul>
    <h1>First Header</h1>
    <h2>Second header</h2>
    <p>This is a paragraph</p>
</div>
</body>
</html>
4

1 に答える 1

0

は<h1>navMenu フロートの影響を受けています。クロージングなどの<div class="clearBoth"></div>間にa を追加してみてください。</ul><h1>

html

</ul>
<div class="clearBoth"></div>
<h1>First Header</h1>

CSS

.clearBoth{
   clear:both;
}
于 2012-08-17T18:17:57.403 に答える