gpt4 book ai didi

javascript - 如何删除水平固定导航栏中列表项之间的 "gaps"

转载 作者:行者123 更新时间:2023-11-28 05:32:52 27 4
gpt4 key购买 nike

所以我创建了一个导航栏,并且它可以与水平导航一起使用。然而,我在导航栏之间有这些“间隙”,如下图所示,但我仍然可以在这些间隙之间单击。

pic1

这是 JSFiddle(SCSS 不起作用,所以我使用编译后的 CSS):

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

这是我正在使用的导航代码,变量只是我正在使用的颜色:

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(Sass):

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

最佳答案

这应该可以解决问题,你可以像下面这样更改 CSS

更新的代码笔: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 */

关于javascript - 如何删除水平固定导航栏中列表项之间的 "gaps",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39560114/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com