浮动div中的li为什么向下偏移，内外边距都是0，谷歌、火狐、IE显示都一样

这里的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="https://q.cnblogs.com/q/128986/images/logo.jpg"/><!--图片的高度是80px-->
</div>

css:

.logo_left{
	float: left;
}

解决

  • 那么，为什么div的高度会比img的高度多3px呢？

    这是因为，行内元素后面会跟一个空白符，会使它的高度多出3px。

  • 怎么解决？

    我在查阅验证之后总结了4种方案：

  1. 设置div{ font-size: 0}；将外层块级标签的font-size设置为0；

  2. 设置div{ height:**px;}；将外层块级标签的高度设置为img的高度

  3. 设置img{ display: block};将内层行内标签的display设置为block，将其变为块级标签；

  4. 设置img{ vertical-align:top;}；将内层行内标签的vertical-align设置为top；

    参考文章：https://www.cnblogs.com/hellobajie/p/5800029.html

最后还是要感谢大家帮我找原因，特别是@RosonJ ，因为他积极的回复我我才没有这么轻易的放弃，嘿嘿，比心

以上是 浮动div中的li为什么向下偏移，内外边距都是0，谷歌、火狐、IE显示都一样 的全部内容， 来源链接： utcz.com/a/41474.html

回到顶部