如何创建双色导航栏？

Question

我目前正在开发一个网站，我需要一个宽导航栏，其中只有三个链接/“按钮”。问题是所有所谓的按钮都有不同的颜色（附上实际模型的屏幕截图）： 因此，我将深黄色应用于主导航栏本身，因此第一个按钮没有问题（因为它应该是黄色的），第二个按钮也很好玩，但第三个按钮自然被中断，并且导航栏背景颜色显示在右侧约 200 像素处。我试图通过创建一个具有适当颜色、高度和宽度的空导航栏右侧来进行某种破解，但由于该网站应该是响应式的，因此该导航栏右侧解决方案只会带来额外的麻烦。 这是我的标记（我使用标准 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%);
}