我想实现尾部中ul表格的居中为什么都实现不了么
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>11111111111</title> <style type="text/css"> /*此处写代码*/ *{padding: 0;margin: 0;list-style-type: none;font-family: "monospace";} body{ min-width: 700px} .header{ width: 100%; height: 100px; background-color: #333; line-height: 100px; color: #fff; } .header ul{ float: right;margin-right: 60px; } .header ul li{ float: left;margin: 0 40px; } /*以上这是头部的css*/ .footer{ float: left; width: 100%; height: 100px; background-color: #333; color: #fff; line-height: 100px; } .footer ul{ width: 100%; text-align: center; overflow: hidden; } .footer li{ float: left;margin: 0 30px; } /*以上这是尾部部分的css*/ .container{ padding: 0 200px 0 220px ; } .middle,.left,.right{ position: relative;float: left;min-height: 400px;} .middle{ background-color: pink; width: 100%; } .left{ width: 220px; background-color: aquamarine; margin-left: -100%; left: -220px; } .right{ width: 200px; background-color: blue; margin-left: -200px; right: -200px; } </style> </head> <body> <!-- 此处写代码 --> <div class="header"> <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" alt=""> <ul > <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> <div class="container"> <div class="middle">middle</div> <div class="left">left职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径</div> <div class="right">right职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径职业路径</div> </div> <div class="footer"> <ul> <li>网站首页</li> <li>企业合作</li> <li>人才招聘</li> <li>联系我们</li> <li>常见问题</li> <li>友情链接</li> </ul> </div> </body> </html>
这是我的代码,我为尾部清楚浮动了但是ul样式好像还是没包裹住里面的li。为里面的li浮动是为了让表格从左到右实现这个效果。
想请教一下大家怎么实现ul的居中。谢谢了
0
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星