请老师帮忙检查一下代码
来源：3-10 编程练习
木子小可爱
2019-10-15 21:09:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*在此处补充代码*/
header,div,ul,li,input{
display:flex;
}
header{
justify-content: space-around;background:#000;align-items:center;
}
ul{
justify-content: space-around;
}
.nav{
color:#fff;justify-content:space-around;align-items:center;width:500px;
}
input{
width:50px;background-color: #ffa500;color:#fff;border-radius:5px;border:none;margin:0 20px;justify-content:center;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>
</body>
</html>
1回答
-
好帮手慕慕子
2019-10-16
同学你好，整体思路是对的， 不过由于ul有默认浏览器样式， 如下图所示， 通过检查元素可以发现， ul的左侧空白间距多余右侧， 导致整体的居中有误差
建议修改： 可以清除ul的默认样式
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题