为什么会这样？http://www.imooc.com/video/2496
来源：3-5 企业网站制作之导航部分制作（二）
飞天意大利面神兽
2016-05-31 16:39
<!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的空隙，不知道什么情况。如下图！
写回答
关注
2回答
-
- 慕仰0119769
- 2016-06-01 11:27:32
你没设置高度啦，那么就会自动撑开，所以会多一点点，你把list那里加个50px的高度就行了
-
- 慕仰0119769
- 2016-05-31 17:46:08
你设置下line-height就好
企业网站综合布局实战
本课程重点介绍HTML/CSS实现常见企业网站布局的方法
157042 学习 · 1984 问题
相似问题