请问为什么底部不能居中,而且定位也有问题

请问为什么底部不能居中,而且定位也有问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
       *{
           margin: 0;
           padding: 0;
       }
    .nav {
        background:#000;
        width:100%;
        min-width:1100px;
        height:100px;
        position:fixed;
    }
    .footer {
        background:#000;
        width:100%;
        min-width:1100px;
        height:100px;
        margin: 0 auto;
        position: fixed;
        top: 90%;
    }
    .nav-ul {
        float:right;
        margin:0;
    }
    .nav-ul li {
        float:left;
        color:#fff;
        font-size:24px;
        list-style:none;
        padding:0 30px;
        line-height:100px;
    }
    a {
        color:#fff;
        text-decoration:none;
    }
    .footer-ul {
        color:#fff;
        font-size:24px;
        list-style:none;
        padding:0 30px;
        line-height:100px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        zoom: 1;
    }    
    .footer-ul li {
        float: left;
        color:#fff;
        font-size:24px;
        list-style:none;
        padding:0 30px;
        line-height:100px;
    }    
    #box1 img {
        width: 100%;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
      <ul class="nav-ul">
          <li><a href="#">课程</a></li>
          <li><a href="#">职业路径</a></li>
          <li><a href="#">实战</a></li>
          <li><a href="#">猿问</a></li>
          <li><a href="#">手记</a></li>
      </ul>
  </div>
  <div id="box1">
      <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/>
  </div>
  <div id="box1">
      <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/>
  </div>
  <div id="box1">
      <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/>
  </div>
  <div class="footer">
      <ul class="footer-ul">
          <li><a href="#">网站首页</a></li>
          <li><a href="#">企业合作</a></li>
          <li><a href="#">人才招聘</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">友情链接</a></li>
      </ul>
  </div>
</body>
</html>

底部设置了ul宽度和margin,但是不能居中。   还有给他设置的fixed,为什么top要设置90%才能显示?

正在回答

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

2回答

宽度不能设为100%呀,给一个合适的定值,而且footer要置于页面的下方,使用bottom最方便的

http://img1.sycdn.imooc.com//climg/5a1e82ef0001aa2905290267.jpghttp://img1.sycdn.imooc.com//climg/5a1e82f60001be6805200323.jpg

  • 鹿屿 提问者 #1
    为什么不能用100%呢?这样不是就能根据窗口大小自动缩小的么?
    2017-11-29 19:31:03
  • 鹿屿 提问者 #2
    非常感谢!
    2017-11-30 14:19:27
怎么都被占用了呢 2017-11-30 09:25:53

宽度如果是100%的话,左右两侧就不需要设置相等的间距了。margin:0 auto左右自适应居中就没有意义了。

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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