水平固定バーのリスト項目間の「ギャップ」を取り除くにはどうすればいいですか

Question

私はnavbarを作成しました。しかし、私は下の図に示されているように、これらのギャップをナビゲーションバーの間に持っていますが、これらのギャップをクリックすることはできます。ここで

JSFiddle（SCSSはので、私はコンパイルCSSを使用した作業wouldntの）である：ここでは

http://codepen.io/anon/pen/JRRowb

は、私が使用しているNAVコードで、変数はそのIちょうど色です

HTML：：

「を使用してメートル210

SCSS（サス）：

/*---------------- 
    Navbar Styles 
    ----------------*/ 
.nav_fixed { 
    position: fixed; 
    top: -($info_bar_height/4); 
    z-index: 100; 
} 
nav { 
    height: $navbar_height; 
    width: 100%; 
    margin: 0; 

    color: $navbar_color; 
    background: $navbar_background_color; 
    font-weight: bold; 
    letter-spacing: 0.025em; 
    line-height: $navbar_height; 
    text-transform: uppercase; 

    -webkit-box-shadow: 0 8px 6px -6px $navbar_shadow_color; 
    -moz-box-shadow: 0 8px 6px -6px $navbar_shadow_color; 
    box-shadow: 0 8px 6px -6px $navbar_shadow_color; 

    .brand { 
     float: left; 
     margin-left: $navbar_padding; 
     font-size: 20px; 
    } 

    ul { 
     margin: 0; 
     padding: 0; 
     display: flex; 
     float: right; 
     margin-right: $navbar_padding - 20px; 

     li { 
      display: inline-block; 
      list-style: none; 
      cursor: pointer; 

      a { 
       color: $navbar_color; 
       text-decoration: none; 
       padding: ($navbar_height/4) 20px; 
       margin: 10px 0; 

       @include transition(all .175s ease-in-out); 
      } 
      a.nav-bars { 
       display: none; 
      } 
     } 
     li:hover { 
      a { 
       color: $link_hover_color; 
      } 
     } 
    } 

    a.nav-bars { 
     display: none; 
    } 
} 

/*-------------------- 
    Responsive Styles 
    --------------------*/ 

@media only screen and (min-width: 320px) and (max-width: 768px) { 
    .info_bar { 
     display: none; 
    } 

    nav { 
     position: fixed; 
     z-index: 100; 

     -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
     box-shadow: none; 

     ul { 
      position: absolute; 
      top: $navbar_height + ($navbar_padding/4) - 10px; 
      display: none; 
      height: 100%; 
      width: 100%; 
      z-index: 90; 
     } 
     a.nav-bars { 
      margin: 0; 
      padding: 0; 
      display: inline-block; 
      text-decoration: none; 
      float: right; 
      margin-right: $navbar_padding; 
      font-size: 24px; 
      cursor: pointer; 

      @include transition(all .375s ease-in-out); 
     } 

     li { 
      display: block; 
      width: 100%; 
      padding: 0; 
      margin: 0; 

      a { 
       position: relative; 
       display: block; 
       margin: 0; 
       padding: 0; 

       color: $navbar_color; 
       background: $navbar_background_color; 
       font-weight: bold; 
       letter-spacing: 0.025em; 
       line-height: 40px; 
       border-bottom: 1px solid darken($navbar_background_color, 5); 
       border-top: 1px solid darken($navbar_background_color, 5); 
      } 
     } 
    } 
} 

.rotate { 
    @include transform(rotate(90deg)); 
} 

JS：

$(function() { 
    var nav = $('nav'); 
    var info_bar_height = $('#info_bar').height(); 

    $(window).scroll(function() { 
     if($(this).scrollTop() > info_bar_height) { 
      nav.addClass('nav_fixed'); 
     } else { 
      nav.removeClass('nav_fixed'); 
     } 
    }); 

    var bars = $('.nav-bars'); 
    var menu = $('nav ul'); 
    var menuHeight = menu.height(); 

    $(bars).on('click', function(e) { 
     e.preventDefault(); 
     bars.toggleClass('rotate'); 
     menu.slideToggle(375, "linear"); 
    }); 
}); 

Answer 1

これは、以下のようにCSSを変更するトリックを行う必要があります

更新codepen：http://codepen.io/anon/pen/QKKbyZ

nav ul li { 
    /* display: inline-block;  remove, not needed as you use flex on its parent */ 
    list-style: none; 
    cursor: pointer; } 
    nav ul li a { 
    color: #444; 
    text-decoration: none; 
    padding: 22.5px 20px; 
    /* margin: 10px 0;    remove, creates additional gaps */ 

Answer 2

'NAVのULのリチウム' からマージンを除去し、表示を削除します「a.navからインラインブロック-bars '