这里的li标签为什么向下偏移了一点,内外边距都是0,谷歌、火狐、IE显示都一样,实在不知道为什么
html:
<div class="nav">
<div class="nav_menu">
<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_search">
<input/>
</div>
</div><!--nav结束-->
css:
*{
margin:0;
padding: 0;
font-size:12px;
}
body{
background-color: #F5F5F5;
}
.wrap{
width:1000px;
margin:0 auto;
background-color: white;
}
.nav{
background:url('../images/nav_bg.jpg') repeat-x;
width: 100%;
height: 40px;
border-radius: 5px;
}
.nav_menu{
float: left;
width: 610px;
height: 40px;
}
.nav_menu li{
float: left;
list-style: none;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
}
.nav_menu a:link,.nav_menu a:visited,.nav_menu a:active{
text-decoration: none;
color: white;
font-size:16px;
}
.nav_menu a:visited,.nav_menu a:active{
color: #FF0;
}
我找到问题的原因了,是我其它代码的影响,我的错...
是这么回事:在我这个导航div的前面呢,还有一个浮动的div,因为这个div多出了3px,所以导致了我的.nav_menu在浮动的时候被“挤下去”了
如图:
html:
<div class="logo_left"><!--div的高度是83px-->
<img src="images/logo.jpg"/><!--图片的高度是80px-->
</div>
css:
.logo_left{
float: left;
}
最后还是要感谢大家帮我找原因,特别是@RosonJ ,因为他积极的回复我我才没有这么轻易的放弃,嘿嘿,比心
用Chorme 的開發者工具,Element 頁籤有個Computed,看看是什麼造成偏移
li的高度是40px
@Yufy66:
應該要看父容器
ul跟div.nav_menu
@RosonJ:
我查了浏览器自带属性的这些值,然后也尝试修改了下并没有什么改变
ul:
nav_menu:
@Yufy66:
實測是margin-block-start, margin-block-end 這兩個影響
為什麼會產生這兩個屬性原因待查,但設為0可解決
ul {
margin-block-start: 0em;
margin-block-end: 0em;
}
@RosonJ: 谢谢!我已经找到问题的原因了,并不是这个导致的,是前面的div把nav_menu挤下去了,具体可以看我下面的回答。不过还是非常感谢你!
看一下是不是你背景图片问题
背景图片是个1x40像素的jpg,这个怎么看有啥问题?