麻烦老师帮忙看一下代码需不需要再改进一下
来源：2-4 编程练习
程序员小张
2020-04-06 17:07:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
position: absolute;
background-color: black;
width: 1100px;
height: 122px;
top: 50%;
left: 50%;
margin-left: -550px;
margin-top: -50px;
}
.nav{
position: relative;
float: right;
bottom: 61px;
margin-bottom: -16px;
}
.nav ul li{
display: inline-block;
}
.nav ul li a{
color: white;
font-size:25px;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
</div>
<div class="nav">
<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>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码中问题如下：
1、整体没有垂直居中显示，高度设置122px，但是上间距设置不是负的一半值
建议按照任务中要求的设置100px。
2、图片在盒子中没有居中显示
调整盒子高度就好。并且图片为行内元素，默认存在间隙，可以设置为块元素清除。
3、右侧导航项垂直居中不建议使用定位，不好进行控制，因为文字是有高度的。可以使用行高等于高度完成，并且左侧盒子需要设置左浮动，这样才能显示在一行
参考修改：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题