大神看看为什么
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<link rel = "stylesheet" href = "D:\办公软件\PSPad editor\xhtml\47css.css" />
<style>
#container {
width:1002px;
height:128px;
}
#header {
background:gray url(D:/learningFiles/tupian/ll.PNG);
}
#nav li {
float:left;
}
</style>
</head>
<body>
<div id = "container">
<div id = "header">
<img src = "D:/learningFiles/tupian/logo.PNG" alt = "" id = "logo" />
<ul id = "nav">
<li><a href = "#">导航1</a></li>
<li><a href = "#">导航2</a></li>
<li><a href = "#">导航3</a></li>
<li><a href = "#">导航4</a></li>
<li><a href = "#">导航5</a></li>
<li><a href = "#">导航6</a></li>
<li><a href = "#">导航7</a></li>
</ul>
</div>
<div id = "main">
<div id = "lside">
<div class = "subtitle"></div>
<div class id = "four"></div>
<div class id = "four"></div>
<div class id = "four"></div>
<div class id = "four"></div>
</div>
<div id = "rside">
<div class = "subtitle">
<ul>
<li>文章1</li>
<li>文章2</li>
<li>文章3</li>
<li>文章4</li>
<li>文章5</li>
<li>文章6</li>
<li>文章7</li>
</ul>
</div>
</div>
</div>
<div id = "footer"></div>
</div>
</body>
</html>
为什么文章一跑到第一行了
慕粉14711348252回答
-
qq_安安_17
#nav li { float:left; display:inline-block; width: 80px; } .subtitle li{ clear: left; }完善了一下，7个导航挤在一起了。“文章1”在上面就是因为没有清除浮动，浮动本身不占位置，相当于飘在页面上。你不需要这个浮动效果了，就必须显式的清除掉浮动效果，从而恢复到原来的流式效果。 -
赫本女神
我发现代码不是在编辑器上就看不下去......没清楚浮动问题？
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5