此处的footer当中的ul块元素为什么不能通过margin auto的方法来实现居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
*{
margin:0;
padding: 0;
font-family: "微软雅黑";
}
ul{list-style-type: none;}
a{ text-decoration: none; }
.header{
width: 100%;
background-color:black;
position: relative;
}
.logo{
height: 100px;
margin-left: 50px;
}
.nav{
/*height: 100px;*/
position: absolute;
right: 0px;
top: 0;
}
.nav li,.footer ul li{
float: left;
}
.nav a,.footer a{
color: #fff;
font-size:20px;
line-height: 100px;
margin-right: 50px;
}
a:hover{
color:orange;
}
.main{
width: 1300px;
margin: 0 auto;
}
.main img{ width: 100%; }
.footer{
width: 100%;
background-color:black;
/*position: relative;*/
}
.footer ul{
height: 100px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo"></a>
</div>
<ul class= "nav">
<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="main">
</div>
<div class="footer">
<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>
</body>
</html>
正在回答
同学你好，非常抱歉是老师的失误，应该是每个导航项都是右侧间隙：
这样最后一项会多出来间隙，导致不平衡，所以建议修改为左右两侧的间隙。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星