我想实现尾部中ul表格的居中为什么都实现不了么

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

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
卡布琦诺 2018-10-07 15:25:59

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

http://img1.sycdn.imooc.com//climg/5bb9b5010001734304470484.jpg

  • 提问者 慕函数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
提问者 慕函数12138 2018-10-07 00:59:22

了解了,还是最终只能使用绝对定位实现的么,想问问还有没有其他方法可以不用定位实现的呢

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师