gpt4 book ai didi

html - CSS - 带边框的 UL 内联 LI 改变 block (v) 内联?

转载 作者:行者123 更新时间:2023-11-28 13:44:38 28 4
gpt4 key购买 nike

我很困惑...所以我在容器中有一个 UL,当我更改 UL 上方的 DIV 时,它似乎会影响 UL 之后的流程...发生了什么事?

DIV 是 block 元素,对吗?和 UL 一样,对吧?

所以在这个例子中,如果你删除“header”DIV,它会改变 H1 元素在 UL 之后的显示方式......谁能告诉我为什么?

我在 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>

最佳答案

<h1>受到 navMenu float 的影响,请尝试添加 <div class="clearBoth"></div>在收盘之间</ul><h1>像这样:

html

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

CSS

.clearBoth{
clear:both;
}

关于html - CSS - 带边框的 UL 内联 LI 改变 block (v) 内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12010903/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com