請教大神一下到底是哪里有問題,為什么第三個(gè)盒子換行了
總寬度設(shè)置了1000PX,左邊盒子設(shè)置了10px,中間980px,右邊10px,都向左浮動,為什么排列不到一起,
下面是代碼,還請大神指教
<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>頁面練習(xí)</title>
<link?href="css/main.css"?rel="stylesheet"?type="text/css"/>
<script?src="js/setHomeSetFav.js"?type="text/javascript"?charset="gb2312"></script>
</head>
<body>
????<div?class="top">
????????<div?class="top_content">
????????<ul>
????????????<li><a?href="#">聯(lián)系我們</a></li>
????????????<li><a?href="#"?onclick="AddFavorite(window.location,document.title">加入收藏</a></li>
????????????<li><a?href="#"?onclick="SetHome(window.location)">設(shè)置首頁</a></li>????
????????</ul>
????</div><!--top_content結(jié)束-->
????</div><!--top結(jié)束-->
????<div?class="wrap">
????????<div?class="logo">
????????<div?class="logo_left">
????????????<img?src="C:/html/images/logo.jpg"?alt="慕課網(wǎng)"/>
????????</div>
????????<div?class="logo_right">
????????????<img?src="C:/html/images/tel.jpg"?alt="服務(wù)熱線"/>24小時(shí)服務(wù)熱線:<span?class="tel">123-456-7890</span>
????????</div>
????</div><!--logo結(jié)束-->
????<div?class="nav">
????????<div?class="nav_left"></div>
????????<div?class="nav_mid">
????????????<div?class="nav_mid_left">
????????????????<ul>
????????????????????<li><a?href="#">首頁</a></li>
????????????????????<li><a?href="list.html">關(guān)于慕課</a></li>
????????????????????<li><a?href="list.html">新聞動態(tài)</a></li>
????????????????????<li><a?href="list.html">在線課程</a></li>
????????????????????<li><a?href="list.html">人才招聘</a></li>
????????????????</ul>
????????????</div><!--nav_mid_left結(jié)束-->
????????????<div?class="nav_mid_right">
????????????????<form?action=""?method="POST">
????????????????????<input?type="text"/>
????????????????</form>
????????????</div><!--nav_mid_right-->
????????</div><!--nav_mid結(jié)束-->
????????<div?class="nav_right"></div>
????</div><!--nav結(jié)束-->
????</div><!--wrap結(jié)束-->
</body>
</html>
*
{
????margin:0;
????padding:0;
????font-size:?12px;
}
body
{
????background-color:?#f5f5f5;
}
.top
{
????width:?100%;
????height:?27px;
????background:url(C:/html/images/top_bg.jpg)repeat-x
}
.top_content
{
????width:1000px;
????margin:0?auto
}
.top_content?li
{???
????list-style-image:url(C:/html/images/li_bg.gif);
????float:right;
????width:?70px;
????line-height:?27px;
}
.top_content?a:link,.top_content?a:visited
{
????color:?#8e8e8e;
????text-decoration:?none;
}
.top_content?a:hover,.top_content?a:active
{
????color:?#990000;
}
.wrap
{
????width:1000px;
????margin:0?auto;
}
.logo
{
????height:80px;
????background-color:?#fff;
}
.logo_left
{
????width:200px;
????float:left;
}
.logo_right
{
????width:?300px;
????float:right;
????height:28px;
????margin-top:30px;
????color:#8e8e8e
}
.logo_right?img
{
????vertical-align:middle;
????margin-right:?10px;
}
.tel
{
????font-family:?Helvetica;
????font:?size?16px;
????color:#c00
}
.nav
{
????height:40px;
????clear:both;
}
.nav_left
{
????width:10px;
????background-image:?url(C:/html/images/nav_left.jpg)no-repeat;
????float:left;
????border:2px?blue?solid;
????height:40px;
}
.nav_mid
{
????width:980px;
????background:url(C:/html/images/nav_bg.jpg)repeat-x;
????border:2px?red?solid;
????float:left;
}
.nav_right
{
????width:10px;
????background:url(C:/html/images/nav_right.jpg)no-repeat;
????float:left;
????border:2px?green?solid;
????height:40px;
}
2021-04-01
.nav_left??.nav_mid??.nav_right設(shè)置了邊框,總寬度>wrap寬度(1000px)。詳細(xì)教程看本教程第二章第一節(jié)
2020-04-14
http://idcbgp.cn/notepad/2351ac可以看看這里面的解釋。