<div class='footer'>
<ul>
<li>网站首页</li>
<li>企业招聘</li>
<li>联系我们</li>
<li>讲师招聘</li>
</ul>
<ul>
<li>网站首页</li>
<li>企业招聘</li>
<li>联系我们</li>
<li>讲师招聘</li>
</ul>
</div>
.footer{
width: 100%;
height: 100px;
background: black;
position: fixed;
bottom: 0;
text-align: center;
}
.footer ul{
display: inline-block;
color: white;
}
.footer li{
height: 100px;
line-height: 100px;
float: left;
margin-right: 20px
}
在父级加上 text-align: center; 虽然这个属性只对行内元素有效,但是同时把需要居中的块设置上 display: inline-block; 这样就可以把块级元素转化为拥有块级属性的行内元素,从而让text-align生效,达到自适应宽度居中显示。