老师，请检查代码对不对，如果用position可以实现同样的效果吗？
来源：2-4 编程练习
Lesley王
2020-07-26 19:21:58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
.container{
width: 1100px;
height: 100px;
background-color: black;
margin: 0 auto;
}
.logo{
float: left;
}
.nav{
width: 500px;
height: 100px;
text-align:right;
font-size: 25px;
line-height: 100px;
font-family: "微软雅黑";
right:0px;
float: right;
display: table;
}
a{
text-decoration: none;
color: white;
display: table-cell;
padding-right: 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="logo">
<a href="#">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</a>
</div>
<div class="nav">
<a href="#1">课程</a>
<a href="#2">职业路径</a>
<a href="#3">实战</a>
<a href="#4">猿问</a>
<a href="#5">手记</a>
</div>
</div>
</body>
</html>
2回答
-
同学你好，可以把同学修改后的代码粘贴上来，老师帮助排查，另外：单位使用的是px，不能缩放是正常的。现在只考虑在不缩放的情况下，正常显示即可。
祝学习愉快~
0 -
好帮手慕言
2020-07-27
同学你好，代码中存在如下几点问题：
1、子元素的高度溢出父级的高度，如下：
原因是img标签自带间隙，建议：可以给img设置为块元素
2、导航条在垂直方向上没有居中，建议：可以配合定位实现，例如：
代码具有灵活性，不管使用哪种方式，能够实现效果即可。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1h020-07-27
相似问题