我正在尝试创建一个简单的单页网站,但是导航栏中的间距存在问题(如下所示)。
使用无序列表可以正常工作,直到列表最终位于中央徽标后面。使用当前代码添加一个空列表会产生很大的差距。是否可以更改单个列表元素的间距?
.navbar {
position: fixed;
top: 0;
height: 11.5vh;
width: 100vw;
/* background-color: #07470B; */
/* opacity: 0.96; */
background: #f6f6f6;
z-index: 10;
padding: 0;
margin: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding-left: 5vw;
padding-top: 3vh;
}
.navbarList {
display: inline-block;
width: 14vw;
font-family: 'Raleway';
font-size: 5vh;
padding: 0;
margin: 0;
}
.navbarList li {
margin: 0;
}
.navbarList a {
color:#989898;
text-decoration: none;
}
.navbarList a:hover{
color: #e68935;
}
<body id="site">
<a href="#page1" class="smoothScroll"><img id="logoTop" src="images/logoHead.png"></a>
<div id="site">
<div class="navbar">
<ul>
<!-- <li class="navbarList">
<a href="#page1" class="smoothScroll">HOME</a>
</li> -->
<li class="navbarList">
<a href="#divEndPage1" class="smoothScroll">ABOUT</a>
</li>
<!--<li class="navbarList"></li>-->
<li class="navbarList">
<a href="#page3" class="smoothScroll">EVENTS</a>
</li>
<li class="navbarList">
<a href="#page4" class="smoothScroll">GALLERY</a>
</li>
<li class="navbarList"></li>
<li class="navbarList">
CONTACT
</li>
<li class="navbarList">
CONTACT
</li>
</ul>
<div id="navbarUnderline"></div>
</div>
</body>
最佳答案
对于徽标:在徽标中使用position:absolute
和更高的z-index
。
对于列表:不要使用固定的width
而是使用padding
ID(#
)必须是唯一的。
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
#main {
position: relative
}
.navbar {
position: fixed;
top: 0;
height: 12vh;
width: 100vw;
/* background-color: #07470B; */
/* opacity: 0.96; */
background: #f6f6f6;
z-index: 10;
padding: 0;
margin: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding-left: 5vw;
padding-top: 3vh;
}
.navbarList {
display: inline-block;
font-family: 'Raleway';
font-size: 3vw;
padding: 2vh 2vw;
}
.navbarList li {
margin: 0;
}
.navbarList a {
color: #989898;
text-decoration: none;
}
.navbarList a:hover {
color: #e68935;
}
#logoTop {
position: absolute;
top: 2vh;
left: 55%;
z-index: 11
}
<body id="site">
<div id="main">
<a id="logoTop" href="#page1" class="smoothScroll">
<img src="//lorempixel.com/30/20">
</a>
<div class="navbar">
<ul>
<!-- <li class="navbarList">
<a href="#page1" class="smoothScroll">HOME</a>
</li> -->
<li class="navbarList">
<a href="#divEndPage1" class="smoothScroll">ABOUT</a>
</li>
<!--<li class="navbarList"></li>-->
<li class="navbarList">
<a href="#page3" class="smoothScroll">EVENTS</a>
</li>
<li class="navbarList">
<a href="#page4" class="smoothScroll">GALLERY</a>
</li>
<li class="navbarList"></li>
<li class="navbarList">
CONTACT
</li>
<li class="navbarList">
CONTACT
</li>
</ul>
<div id="navbarUnderline"></div>
</div>
</div>
</body>