关于导航的居中问题作业解决办法

今天面临学习Web中css导航的制作，发现导航居中存在一些问题，设置一直在设置ul中的margin用来居中，结果发现没有用，一番折腾后发现应该给div的大盒子设置居中才能在显示网页中居中，另外也理解了margin和padding的区别，设置了网页的border分割线。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .navbar {
    text-align:center;
    border-top:1px  #dadce0 solid;
    border-bottom :1px  #dadce0 solid;
    height: 42px;
  }
  .navbar ul {
    display:inline-block;
    list-style: none; 
  }
  .navbar li {
    float:left;
  }
  .navbar ul li a {
    text-decoration: none;
    line-height: 42px;
    color: #000;
  }
  .navbar li  {
    padding-left:60px;
    padding-right: 60px;
    
  }
  .navbar li+li {
    border-left: 1px #dadce0 solid;
  }
  </style>

 

小结：居中要在布局最外面的大盒子div中加入text-align：center；并且要设置边框居中的话先设置padding页边距，而不是设置margin。