<div class=‘footer‘> <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生效,达到自适应宽度居中显示。
时间: 2024-12-12 04:23:56