更改单个列表元素的间距

Question

我正在尝试创建一个简单的单页网站，但我在导航栏中遇到间距问题（如下所示）。

使用无序列表效果很好，直到列表结束在中央徽标后面。使用当前代码添加一个空列表会产生太大的差距。是否可以更改单个列表元素的间距？

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

Answer 1

对于徽标：在徽标中使用 position:absolute 和更高的 z-index。
对于列表：不要使用固定 width，而是使用 padding

IDs(#) 必须唯一。

*,
*::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>

Answer 2

如果您想根据项目单独调整间距，您可以添加一个 id 并为其分配 CSS 属性（填充、边距等）。您还可以在 CSS 中使用伪 class 作为 "nth-child(x)" 或 "nth-of-type(x)" 来定位特定项目。

关于您的代码的一些建议：要创建您的菜单，请使用标签 'nav' 而不是您的 'div' "navbar"。另外，不要使用分配给每个 "li" 的 class "navbarList"，最好将 class 添加到 'ul'，然后定位 'li'在 CSS 中这样：“.classOfTheUl li”。此目标 'ul' 列表中的每个 'li' 与 class "classOfTheUl".

Answer 3

如果您想像尝试做的那样将它们分开，我可能建议使用绝对位于徽标两侧的两个单独的无序列表。这是我的基本模型。您可以根据需要调整两侧的列表项数量。

HTML

    <ul class="left-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    <div class="logo-block"></div>

    <ul class="right-nav">
      <li>Four</li>
      <li>Five</li>
    </ul>

CSS

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    float: left;
    padding: 0px 20px;
  }

  .logo-block {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    background-color: red;
  }

  ul.left-nav {
    position: absolute;
    right: calc(50% + 20px);
  }

  ul.right-nav {
    position: absolute;
    left: calc(50% + 20px);
  }

Here is a link to a mockup on CodePen.

更改单个列表元素的间距

Changing Spacing of Individual List Elements

html

css

navbar