我想实现尾部中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的居中。谢谢了

慕函数12138 2018-10-06

源自：CSS网页布局基础 3-3 编程练习

收起

2回答

樱桃小胖子 2018-10-07 15:25:59

可以使用margin:0 auto;进行居中

收起回答

提问者慕函数12138 #1

你好想问一下，我之前设置margin： 0 auto不能成功的原因就是，因为浮动整个底部框的原因么，好像是没必要浮动的。请问一下，加上clear的原因是什么么

2018-10-11 22:41:32
樱桃小胖子回复提问者慕函数12138 #2

clear:both是清除浮动，这里是清楚footer上面的浮动元素对footer的影响，从而使得footer能够正常显示，一般开发中常用的清楚浮动的方法是clear:both;而你设置margin:0 auto;不起作用是因为你给footer ul设置的宽度是100%，footer ul宽度100%默认是横向铺满全屏的，这就导致ul无法实现居中显示，因此上面修改后的代码，footer ul的宽度设置的50%。

2018-10-12 10:15:19