CSS - Div并非以'Auto：0 Margin'为中心

Question

我想在CSS中创建一个菜单栏，主按钮（蓝色div）应该以导航栏（橙色div）为中心，每个按钮留下相等的spave beteen以及。

由于某种原因，使用margin: 0 auto不起作用。

这里是我的代码：

.nav { 
    height: 40px; 
    width: 80%; 
    margin: 0 auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    background-color: lightsalmon; 
} 

.nav__btn-cont { 
    width: 20%; 
} 

.nav__btn { 
    height: 50px; 
    width: -moz-calc(100% - 20px); 
    width: -webkit-calc(100% - 20px); 
    width: calc(100% - 20px); 
    margin: 0 auto; 
    background-color: lightblue; 
} 

---

<div class="nav"> 
     <div class="w3-row"> 
      <div class="w3-col nav__btn-cont"> 
       <div class="w3-col nav__btn"> 
       </div> 
      </div> 
      <div class="w3-col nav__btn-cont"> 
       <div class="w3-col nav__btn"> 
       </div> 
      </div> 
      <div class="w3-col nav__btn-cont"> 
       <div class="w3-col nav__btn"> 
       </div> 
      </div> 
      <div class="w3-col nav__btn-cont"> 
       <div class="w3-col nav__btn"> 
       </div> 
      </div> 
      <div class="w3-col nav__btn-cont"> 
       <div class="w3-col nav__btn"> 
       </div> 
      </div> 
     </div> 
    </div> 

这里是我的小提琴：http://jsfiddle.net/zpoqjc5s/

我wodnering如果有人能pooint我在朝着正确的方向，任何帮助或建议表示感谢，提前谢谢。

注意，我用的引导和w3.css

Answer 1

的w3-col类的W3.css包括float:left。

.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter { 
    float: left; 
} 

...删除您的按钮

.nav__btn { 
     height: 50px; 
     width: -moz-calc(100% - 20px); 
     width: -webkit-calc(100% - 20px); 
     width: calc(100% - 20px); 
     margin: 0 auto; 
     background-color: lightblue; 
     float:none; /* added this */ 
    } 

JSFiddle Demo