为了账号安全,请及时绑定邮箱和手机立即绑定

nav_mid_li 不在导航栏上剧中?

https://img1.sycdn.imooc.com//5b3746c80001b00710920243.jpg

我按照老师的为什么我的nav_mid_li 不在导航栏上剧中,我的css及html如下:

.nav {	
height: 40px;
}
.nav_left {
width: 10px;	
background: url(../img/nav_left.jpg) no-repeat;
}
.nav_mid {	
width: 980px;	
background: url(../img/nav_bg.jpg) repeat-x;	
line-height: 40px;
}
.nav_right {	
width: 10px;	
background: url(../img/nav_right.jpg) no-repeat;
}
.nav_left,.nav_mid,.nav_right {	
height: 40px;	
float: left;	
display: inline;
}
.nav_mid_left,.nav_mid_right{	
float: left;
}
.nav_mid_left{	
width: 680px;
}
.nav_mid_right{	
width: 300px;
}
.nav_mid_left li {	
float: left;	
list-style-type: none;	
width: 100px;	
font-family: "微软雅黑";	
text-align: center;
}

HTML如下:

         <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">关于慕课</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="nav_mid_right">

        <form action="" method="post">

        <input type="text" />

        </form>

        </div>

        </div>

                      <!--nav_mid结束

                      作者:350634964@qq.com

                      时间:2018-06-29

                      描述:

                      -->

        <div class="nav_right"></div>

        </div>

请问有什么错误,求大神。

正在回答

2 回答

清除一下默认样式  

*{

margin: 0;

padding: 0;

}




0 回复 有任何疑惑可以回复我~

.nav {

        width:1000px;

height: 40px;

background:red;

}

.nav_left {

width: 10px;  

background: url(../img/nav_left.jpg) no-repeat;

}

.nav_mid {

width: 980px; 

background: url(../img/nav_bg.jpg) repeat-x; 


}

.nav_right {  

width: 10px;  

background: url(../img/nav_right.jpg) no-repeat;

}

.nav_left,.nav_mid,.nav_right {   

height: 40px; 

 

display: inline;

}

.nav_mid_left,.nav_mid_right{  

display:inline;

line-height: 40px;

}

.nav_mid_left{ 

width: 680px;

}

.nav_mid_right{

width: 300px;

}

.nav_mid_left li {   

float: left;  

list-style-type: none;

width: 100px; 

font-family: "微软雅黑";  

text-align: center;

}


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
企业网站综合布局实战
  • 参与学习       157081    人
  • 解答问题       2157    个

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

进入课程

nav_mid_li 不在导航栏上剧中?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号