html - 我有一个倾斜的菜单列表，我怎样才能把它对齐？

Question

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

.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;
}

   <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>

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:first-child 或 li:last-child 将规则专门应用于第一个或最后一个 li根据需要进行调整。