html5 - CSS浮动问题 位置偏移了?
本文介绍了html5 - CSS浮动问题 位置偏移了?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
css代码如下:
.nav{
width: 1000px;
height: 40px;
background: url("../images/nav_bg.jpg") repeat-x;
margin: 0 auto;
}
.nav .nav_left{
float: left;
}
.nav_left li{
list-style-type: none;
float: left;
width: 100px;
line-height: 40px;
text-align: center;
}
.nav_left a{
text-decoration: none;
color: white;
font-size: 16px;
font-family: 微软雅黑;
}
.nav .nav_right{
float: right;
}
html代码如下:
<div class="nav">
<div class="nav_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于慕课</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">在线课程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
<div class="nav_right">
<input type="text">
</div>
</div>
效果:
li的flot设置成了left
效果不应该是靠左么 为什么会出现在灰色条的中间呢?
求解
解决方案
检查这个logo区域的高度是否异常,有可能就相差几个像素,导致logo超出了上面白色的header区域,
底下的nav >li float left的时候位置不够就靠右了。
这篇关于html5 - CSS浮动问题 位置偏移了?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文