为什么会这样?http://www.imooc.com/video/2496
<!DOCTYPE html> <html> <head> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script> <meta charset="UTF-8"> <title></title> </head> <body> <div class="top"> <div class="top_content"> <ul> <li><a href="#" onclick="SetHome(window.location)">设为首页</a></li> <li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li> <li><a href="#" >联系我们</a></li> </ul> </div> </div> <div class="wrap"> <div class="logo"> <div class="logo_left"><img src="images/logo.jpg"/></div> <div class="logo_right"><img src="images/tel.jpg"/>24小时热线服务:<span>123-456-7890</span></div> </div> <div class="list_div"> <div class="middle"> <div class="list"> <ul> <li><a href="#">首页</a></li> <li><a href="list.html">关于慕课</a></li> <li><a href="list.html">新闻动态</a></li> <li><a href="list.html">课程中心</a></li> <li><a href="list.html">在线课程</a></li> <li><a href="list.html">人才招聘</a></li> </ul> </div> <div class="input"> <input type="text" /> </div> </div> </div> </div> </body> </html>
*{margin: 0;padding: 0;font-size: 12px;} body{background-color: #F5F5F5;} .top{width: 100%;height: 27px;background: url(../images/top_bg.jpg) repeat-x;} .top_content{width: 1000px;margin: 0 auto;position: relative;} .top_content ul{position: absolute;right: 10px;line-height: 27px;} .top_content li{list-style-image: url(../images/li_bg.gif);display: inline-block;width: 70px;} .top_content a:link,.top_content a:visited{color:#868686;text-decoration: none;} .top_content a:hover,.top_content a:active{color:#900} .wrap{width: 1000px;margin: 0 auto;} .logo{height: 80px;background-color: white;} .logo_left{float: left;width: 200px;} .logo_right{float: right;line-height: 80px;height: 20px;color: #868686;margin-right: 10px;} .logo_right img{vertical-align: middle;margin-right: 10px;} .logo_right span{color: #8B0000;font-size: 16px;font-family: "微软雅黑";font-weight: bolder;} .list_div{width: 1000px;height:50px;margin: 0 auto;background-color: chocolate;} .middle{height: 50px;width: 95%;margin: 0 auto;} .list{float: left;clear: left;line-height: 50px;} .list li{display: inline-block;list-style: none;margin-right: 10px;} .list li a{color: white;font-family: "微软雅黑";font-size: 18px;text-decoration: none;font-weight: bolder;} .input{float: right;line-height: 50px;} .input input{height: 26px;width: 200px;background: url(../images/search.jpg) no-repeat;}
会有2px的空隙,不知道什么情况。如下图!