2-6编程练习问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
      margin: 0;padding: 0;
    }
   .nav{
       width:100%;height: 100px;
       line-height: 100px;margin: 0 auto;
       background:#000;
       position: fixed;
   }

   .nav img{
    float: left;
  }

  .nav ul{
    float: right;
  }
    
   .nav li{
    float:left;
    list-style: none;
    margin: 0 40px;
    color: white;
   }

   .footer{
    width: 100%;
    height:100px;
    background: #000;
    position: fixed;
    bottom: 0;
    text-align: center;
   }
   
  .footer ul{
    display: inline-block;
    color: white;

    } 

   .footer li{
    
    float: left;list-style: none;margin: 0 20px;
   }
   
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">

       <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">       
        <ul>       
          <li>课程</li>
          <li>职业路径</li>
          <li>实战</li>
          <li>猿问</li>
          <li>手记</li>
         </ul> 
  </div>

  <div class="img">
  <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
  <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
  <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
  </div>

  <div class="footer">   
       <ul>
         <li>哈哈哈</li>
         <li>哈哈哈</li>
         <li>哈哈哈</li>
         <li>哈哈哈</li>
         <li>哈哈哈</li>
         </ul>  
  </div>
</body>
</html>

老师，为什么页脚ul加了display：inline-block就可以用text-ailgn居中，不加就不会居中呢，百度上有说是li高度问题，还是不理解。

借风拥妮 2017-07-13

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