Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

对于徽标：在徽标中使用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>

Answer 2

如果要根据项目单独调整间距，可以添加id并为其指定CSS属性（填充，边距等）。您还可以在CSS中使用伪类作为“nth-child（x）”或“nth-of-type（x）”来定位特定项目。

关于您的代码的一些建议：要创建菜单，请使用标记'nav'而不是'div'“navbar”。而不是使用你的类“navbarList”你分配给每个“li”，最好在你的'ul'中添加一个类，然后在CSS中定位'li'：“。classOfTheUl li”。这会将您的'ul'列表中的每个'li'定位为“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

更改单个列表元素的间距

3 个答案: