我有一个偏斜的菜单列表，我怎么能很好地对齐它？

Question

好吧，它是一个自定义菜单，有一点定制，有一个倾斜的菜单，你注意到当我检查元素时，左边的第一个菜单溢出容器的宽度，最后一个菜单不符合容器的末端，在两侧对齐它的最佳解决方案是什么？感谢

＆＃13;

＆＃13;

.nav-tabs {
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background: transparent;
    border-radius: 0;
    font-family: 'Klavika Bd';
    text-decoration: none;
    font-size: 28px;
    border: 0;


}

.nav-tabs>li>a {
  margin: 0;
   border-radius: 0;
   font-family: 'Klavika Bd';
   text-decoration: none;
   font-size: 28px;
   color: #fff;
   border:0;
   text-align: center;
   display: inline-block;
   width: 100%;
    height: 80px;
    position: relative;
    line-height: 58px;

}


.nav-tabs > li {
  width: 32.1%;
  margin-right: 1.2%;
}


.nav-tabs > li > a:before {
     content: '';
     width: 100%;
     height: 100%;
     background: #ff4600;
     transform: skew(-10deg);
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
}

.nav-tabs > li > a:hover:before {
  background: #ff6c34;
}

.nav-tabs > li.active > a:before {
  background: #d1d2d4;
}


.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}

.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
    list-style-type:none;
}

＆＃13;

   <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#top10" aria-controls="top10" role="tab" data-toggle="tab">1. PICK YOUR TOP 10</a></li>
            <li role="presentation"><a href="#review" aria-controls="profile" role="tab" data-toggle="tab">2. REVIEW</a></li>
            <li role="presentation"><a href="#submit" aria-controls="messages" role="tab" data-toggle="tab">3. SUBMIT & SHARE</a></li>
          </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么左侧被填充的主要原因不同于右侧是您的li规则：

.nav-tabs > li {
  width: 32.1%;
  margin-right: 1.2%;
}

根据这条规则，第一条规则左边没有边距，所有其他边缘都有边距。使其均匀对齐的最简单方法是将其更改为：

.nav-tabs > li {
  width: 32.1%;
  margin-right: .6%;
  margin-left: .6%;
}

或者，您可以根据需要使用li或li:first-child专门针对第一个或最后一个li:last-child应用规则。

Answer 2

最好的方法是向margin-left添加一点.nav-tabs>li：

.nav-tabs>li {
  margin-left: 5px;
}

您添加多少保证金取决于您需要多少偏移量。

希望这会有所帮助：）