Question

我很困惑......所以我在容器内部有一个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>

Answer 1

<h1>受navMenu浮动影响，请尝试在结束<div class="clearBoth"></div>和</ul>之间添加<h1>，如下所示：

HTML

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

CSS

.clearBoth{
   clear:both;
}

CSS - 带边框的UL内联LI改变了块（v）内联？

1 个答案: