Jquery 导航栏菜单Boostrap上的无关行

问题是我在720P显示屏上遇到了一条额外的线，有人能告诉我为什么会发生这种情况吗？这是我的密码

  <div class="collapse navbar-collapse" id="myNavbar1">

    <ul id="main" class="nav nav-tabs nav-justified" style="background-color: #F7F7F7;color:white">
      <?php
              $pages = array('home.php');
              if(in_array($pageName,$pages)){
                 $mainActive = 'active';
                 $inactive='';
                 $color='';
              }
              else
              {
                $mainActive = ''; 
                $inactive='inactive';
                $color='style="color:white"';
              }
            ?>
      <li class="<?php echo $mainActive?>" style="border-right:1px solid;border-radius: 5px;background-color: #31b0d5;"><a class="<?php echo $inactive?>" href="home.php" <?php echo $color; ?>>Home</a></li>
 <?php
              $pages = array('calendar.php');
              if(in_array($pageName,$pages)){
                $mainActive = 'active';
                $inactive='';
                $color='';
              }
              else
              {
                $mainActive = '';
                $inactive='inactive';
                $color='style="color:white"';
              }
      ?> 

      <li class="<?php echo $mainActive; ?>" style="border-right:1px solid;border-radius: 5px;background-color: #31b0d5;"><a class="<?php echo $inactive?>" href="calendar.php" <?php echo $color; ?>>My Schedules</a></li>
// and so on all other menu items have similar styling   
</ul>
</div>

由于锚文本变为多行，您可以将文本垂直中对齐
块

我添加了以下css：

.nav-tabs.nav-justified>li {
  vertical-align: middle;
}

.nav-tabs.nav-justified>li>a {
  border: 0!important;
}

您可能还需要修改您的php，当它处于活动状态时，我将
更改为
背景色：白色

以下是JSFIDLE：
这看起来更像是CSS问题，而不是HTML问题。你能编辑你的问题吗？包括CSS和实际的HTML输出，而不是PHP Spaghetti。谢谢你是一个喜欢保存的人：）