请教, footer内容居中
<!DOCTYPE html><html><head> <title>demo</title> <style type="text/css"> *{ margin:0; padding: 0; } .banner{ width: 100%; height: 100px; background-color: black; } .logo{ float: left; line-height: 100px; display: block; height: 100px; } .nav{ float: right; } .nav li{ color: white; float: left; line-height: 100px; list-style: none; margin-right: 45px; } .con{ width: 100%; height: 447px; background:#add8e6; padding-top: 100px; } .con li{ list-style: none; cursor: pointer; } .left{ float: left; } .right{ float: right; } .left li,.left h3{ padding-left: 280px; margin-bottom:1.5em; } .right li,.right h3{ padding-right:400px; margin-bottom:1.5em; } .left span{ background:#ff9999; } .footer{ width: 100%; height: 100px; background:black; } .footer li{ list-style: none; color:white; display: inline; line-height: 100px; } </style></head><body> <div class="banner"> <div class="logo"> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"> </div> <div class="nav"> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> </div> <div class="con"> <div class="left"> <h3>课程推荐</h3> <ul> <li><span>职业路径</span> HTML5与CSS3实现动态网页</li> <li><span>职业路径</span> 零基础入门Android语法与界面</li> <li><span>职业路径</span> iOS基础语法与常用控件</li> <li><span>职业路径</span> PHP入门开发</li> <li><span>职业路径</span> JAVA入门开发</li> </ul> </div> <div class="right"> <h3>相关课程</h3> <ul> <li>HTML CSS JavaScript</li> <li>HTML5 CSS3 Jquery</li> <li>移动端基础 移动端APP开发</li> </ul> </div> </div> <div class="footer"> <ul> <li>网站首页</li> <li>企业合作</li> <li>人才招聘</li> <li>联系我们</li> <li>常见问题</li> <li>友情链接</li> </ul> </div> </div></body></html>
慕勒9893359浏览 2235回答 1
1回答
-
业余奶茶品鉴师
给footer加一个 display: flex; justify-content: center;就可以了，望采纳
随时随地看视频慕课网APP
Html5
CSS3
Html/CSS