我正在尝试创建一个简单的单页网站,但是导航栏中的间距存在问题(如下所示)。



使用无序列表可以正常工作,直到列表最终位于中央徽标后面。使用当前代码添加一个空列表会产生很大的差距。是否可以更改单个列表元素的间距?



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

10-05 20:55
查看更多