请问代码是否正确

来源:2-4 编程练习

mogu54mogu

2019-05-10 21:57:23

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
    	margin:0;
    	padding:0;
    	font-family: "微软雅黑";
    	color:white;
    	text-decoration:none;
    }
    .nav{
    	width: 1100px;
    	height: 100px;
    	background-color: black;
    	text-align: center;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -50px;
    	margin-left: -550px;
    }
    .img{
    	float:left;
    }
    .bar{
    	float:right;
    	
    }
    .bar span{
    	line-height: 100px;
    	margin-right: 40px;
    }
  </style>
</head>
<body>
  <div class="nav">
  	<div class="img">
  		<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
  	</div>
  	<div class="bar">
  		<a href="#"><span>课程</span></a>
  		<a href="#"><span>职业路径</span></a>
  		<a href="#"><span>实战</span></a>
  		<a href="#"><span>猿问</span></a>
  		<a href="#"><span>手记</span></a>
  	</div>
   </div>
</body>
</html>


写回答

1回答

好帮手慕夭夭

2019-05-11

你好同学,logo区域的盒子高度超出父容器。这是因为img作为行内元素,标签换行会导致一个默认的间隙,导致整体高度溢出,属于行内元素的一个特殊现象。解决方式是给图片设置成块元素。

http://img.mukewang.com/climg/5cd63d930001edc804150227.jpg

如下设置:

http://img.mukewang.com/climg/5cd63de40001ce8902520067.jpg

0

0 学习 · 40143 问题

查看课程