首页 新闻 会员 周边

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

0
[已解决问题] 解决于 2020-09-01 16:54

这里的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;
}

Yufy66的主页 Yufy66 | 菜鸟二级 | 园豆:204
提问于:2020-08-31 16:24
< >
分享
最佳答案
0

我找到问题的原因了,是我其它代码的影响,我的错...

原因

是这么回事:在我这个导航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;
}

解决

  • 那么,为什么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 ,因为他积极的回复我我才没有这么轻易的放弃,嘿嘿,比心

Yufy66 | 菜鸟二级 |园豆:204 | 2020-09-01 16:17
其他回答(2)
0

用Chorme 的開發者工具,Element 頁籤有個Computed,看看是什麼造成偏移

RosonJ | 园豆:4910 (老鸟四级) | 2020-08-31 17:41

li的高度是40px

支持(0) 反对(0) Yufy66 | 园豆:204 (菜鸟二级) | 2020-08-31 18:24

@Yufy66:
應該要看父容器
ul跟div.nav_menu

支持(0) 反对(0) RosonJ | 园豆:4910 (老鸟四级) | 2020-08-31 20:00

@RosonJ:
我查了浏览器自带属性的这些值,然后也尝试修改了下并没有什么改变
ul:

nav_menu:

支持(0) 反对(0) Yufy66 | 园豆:204 (菜鸟二级) | 2020-09-01 10:34

@Yufy66:
實測是margin-block-start, margin-block-end 這兩個影響
為什麼會產生這兩個屬性原因待查,但設為0可解決

ul {
    margin-block-start: 0em;
    margin-block-end: 0em;
}
支持(0) 反对(0) RosonJ | 园豆:4910 (老鸟四级) | 2020-09-01 10:58

@RosonJ: 谢谢!我已经找到问题的原因了,并不是这个导致的,是前面的div把nav_menu挤下去了,具体可以看我下面的回答。不过还是非常感谢你!

支持(0) 反对(0) Yufy66 | 园豆:204 (菜鸟二级) | 2020-09-01 16:20
0

看一下是不是你背景图片问题

flyfishing | 园豆:943 (小虾三级) | 2020-08-31 17:50

背景图片是个1x40像素的jpg,这个怎么看有啥问题?

支持(0) 反对(0) Yufy66 | 园豆:204 (菜鸟二级) | 2020-08-31 18:27
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册