Javascript 我如何才能删除“删除”；“差距”；在水平固定导航栏中的我的列表项之间_Javascript_Jquery_Html_Css

Javascript 我如何才能删除“删除”；“差距”；在水平固定导航栏中的我的列表项之间

javascript jquery html css

Javascript 我如何才能删除“删除”；“差距”；在水平固定导航栏中的我的列表项之间,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我创建了一个导航栏，我让它与水平导航一起工作。然而，我在导航栏之间有这些“间隙”，如下图所示，但是我仍然可以在这些间隙之间单击以下是JSFIDLE（SCSS不起作用，所以我使用了编译后的CSS）：这是我使用的导航代码，变量只是我使用的颜色： HTML: <nav id="nav"> <span class="brand">Brand Name</span> <ul> <li><a hre

所以我创建了一个导航栏，我让它与水平导航一起工作。然而，我在导航栏之间有这些“间隙”，如下图所示，但是我仍然可以在这些间隙之间单击

以下是JSFIDLE（SCSS不起作用，所以我使用了编译后的CSS）：

这是我使用的导航代码，变量只是我使用的颜色：

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>

/*----------------
    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));
}

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

JS:

<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>

/*----------------
    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));
}

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

从“nav ul li”中删除边距并从“a.nav-bars”中删除显示：内联块

这应该可以做到这一点，您可以像下面一样更改CSS

更新的代码笔：

这应该可以做到这一点，您可以像下面这样更改CSS

更新的代码笔：

删除

li

元素之间的空白。提供一个工作示例（jsfiddle/snippet/codepen）。这是jsfiddle:，更新了OPLet，我知道复制是否解决了您的问题question@LGSon这没有帮助，它们不是内联块。请删除

li

元素之间的空白。提供一个工作示例（jsfiddle/snippet/codepen）。这是JSFiddle:，更新了OPLet，我知道副本是否解决了您的问题question@LGSon这没用，它们不是内联块，我用什么替换内联块？nav ul li中也没有边距。我用什么替换内联块？nav ul li中也没有边距。谢谢！顺便问一下，有什么办法吗为了让滑梯滑得更平稳？@madcrazydrumma欢迎你。关于过渡，请发布一个新的问题，我相信有些人也会解决这个问题，因为我现在研究这个问题的时间有限：）它不平稳，因为你在绝对定位的

导航ul

上设置了

100%

的高度。当您滑动切换以显示它时，它的高度仅与它的祖先

nav

一样高。您可能应该删除它。@AnkithAmtange已修复！干杯，小伙子们！谢谢顺便问一下，有什么办法可以让滑梯滑得更平稳吗？@madcrazydrumma，不客气。关于过渡，发布一个新的问题，我相信有些人也会解决这个问题，因为我现在研究这个问题的时间有限：）这并不顺利，因为你在你的绝对位置

导航ul

上设置了

100%的高度。当您滑动切换以显示它时，它的高度仅与它的祖先nav
一样高。您可能应该删除它。@AnkithAmtange已修复！干杯，小伙子们！