如何创建双色导航栏？

Question

我目前正在网站上工作，我需要一个只有三个链接的宽导航栏/＆＃34;按钮＆＃34;那里。问题是所有所谓的按钮都有不同的颜色（附上实际模型的截图）： 因此，我已经将深黄色应用于主导航栏本身，因此第一个按钮没有问题（因为它应该是黄色），第二个按钮也很好玩，但第三个是自然中断的，导航栏背景颜色在右边显示大约200px。我试图通过创建一个具有适当颜色，高度和宽度的空导航栏来制作一种黑客，但由于该网站应该响应，这种导航栏权利解决方案只会产生额外的麻烦。 所以这是我的标记（我使用标准的Bootstrap 3导航栏）：

 <nav id="mainav" class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                  <li><a href="#">Achievements</a></li>
                  <li><a href="#">Resources</a></li>
                  <li><a href="#">Overall Points</a></li>
              </ul>
          </div>
      </div>
  </nav>

CSS如下：

#mainav {
height: 100px;
border: none;
border-radius: 0;
background-color: #fec708;
}

#mainav li:first-child {
height: 100px;
padding-top: 25px;
margin-left: 120px;
width: 330px;
text-align: center;
background-color: #fec708;
}

#mainav li:nth-child(2) {
height: 100px;
padding-top: 25px;
width: 320px;
text-align: center;
background-color: #ff7e00;
}

#mainav li:nth-child(3) {
height: 100px;
padding-top: 25px;
width: 330px;
text-align: center;
background-color: #db0104;
}

#mainav li a {
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 300;
font-size: 37px;
}

如果您能分享您对此特定问题的想法和可能的解决方法，我们将不胜感激。 谢谢！

Answer 1

如果您确定这将始终保持三个按钮而第二个按钮居中，则可以将中心按钮设置为橙色，并将背景渐变设置为导航栏，其中50％为黄色，50％为红色：

#mainnav {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.5, #FEC908),
        color-stop(0.5, #DB0104)
    );
    background-image: -o-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: -moz-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: -webkit-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: -ms-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: linear-gradient(to right, #FEC908 50%, #DB0104 50%);
}