如何刪除水平固定導航欄中我的列表項之間的「空白」

所以我創建了一個導航欄，並且我已經使用了水平導航。不過，我在下圖中顯示了導航欄之間的這些「空白」，但是我仍然可以在這些空白之間點擊。如何刪除水平固定導航欄中我的列表項之間的「空白」

這裏是的jsfiddle（SCSS難道不工作，所以我使用的編譯CSS）：

這裏是我使用的導航代碼，變量只是顏色我「M使用：

HTML：

<nav id="nav"> 
    <span class="brand">Brand Name</span> 
    <ul> 
     <li><a href="about.html">About <i class="fa fa-angle-down"></i></a></li> 
     <li><a href="portfolio.html">Portfolio</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    <a class="nav-bars"><i class="fa fa-bars"></i></a> 
</nav>

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：從「a.nav直列塊：

$(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"); 
    }); 
});

來源

2016-09-18 madcrazydrumma

刪除'li'元素之間的空白。 – 2016-09-18 16:42:47

提供一個工作示例（jsfiddle/snippet/codepen）。 – Dekel

這裏是JSFiddle：http://codepen.io/anon/pen/JRRowb，更新了OP – madcrazydrumma

這應該做的伎倆，你改變像下面的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 */

來源

2016-09-18 17:49:35 LGSon

謝謝！順便說一下，有什麼方法可以讓滑動更順暢嗎？ – madcrazydrumma

@madcrazydrumma不客氣。關於過渡，發佈一個新的問題，我相信有人也有這個問題的解決方法，因爲我現在有限的時間來研究它:) – LGSon

它不光滑的因爲你已經設置了100％的高度， '在絕對定位的'nav ul'上。當你滑動滑動來揭示它時，它的高度只有它的祖先'nav'那麼高。你應該刪除它。 – AA2992

-1

從 'NAV UL禮' 刪除餘量和刪除顯示 - 條'

來源

2016-09-18 17:07:57 sean

我該用什麼替換內聯塊？在導航中也沒有餘量。 – madcrazydrumma

如何刪除水平固定導航欄中我的列表項之間的「空白」

回答

相關問題