如何使用 last child 去掉导航栏最后一项的右边距

Question

我创建了一个导航栏，并已将 margin-right 添加到所有项目。

但是，当我尝试去掉导航项“联系人”最后 child 的边距时，它不会消失。

.navbar {
  text-decoration: none;
  margin-bottom: 150px;
}

.nav-item {
  display: inline-block;
  text-decoration: none;
}

.nav-list {
  text-align: center;
}

.nav-list li a {
  text-decoration: none;
  margin-right: 100px;
}

.nav-list ul li a:last-child {
  margin-right: 0;
}

.nav-list li a:active {
  color: #000;
}

.nav-list li a:visited {
  color: #000;
}

<div>
  <nav class="navbar">
    <ul class="nav-list">
      <li class="nav-item"><a href="#home">Home</li></a>
        <li class="nav-item"><a href="#about">About</li></a>
          <li class="nav-item"><a href="#work">Work</li></a>
            <li class="nav-item"><a href="#services">Services</li></a>
              <li class="nav-item"><a href="#contact">Contact</li></a>
    </ul>
  </nav>
</div>

这是我的码笔：https://codepen.io/derrickogole/pen/rNxbaaK

有没有办法在不添加额外的 class 联系人的情况下做到这一点？

Answer 1

使用 :last-child psuedo-class.

.nav-item:last-child a {
  margin: 0;
}

在这里查看：

.navbar {
  text-decoration: none;
  margin-bottom: 150px;
}

.nav-item {
  display: inline-block;
  text-decoration: none;
}

.nav-list {
  text-align: center;
}

.nav-list li a {
  text-decoration: none;
  margin-right: 100px;
}

.nav-list ul li a:last-child {
  margin-right: 0;
}

.nav-list li a:active {
  color: #000;
}

.nav-list li a:visited {
  color: #000;
}

.nav-item:last-child a {
  margin: 0;
}

<div>
  <nav class="navbar">
    <ul class="nav-list">
      <li class="nav-item"><a href="#home">Home</a></li>
      <li class="nav-item"><a href="#about">About</a></li>
      <li class="nav-item"><a href="#work">Work</a></li>
      <li class="nav-item"><a href="#services">Services</a></li>
      <li class="nav-item"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

此外，由于 </li> 在 </a> 之前关闭，您的标记无效。 a嵌套在li中，所以需要先关闭。

如何使用 last child 去掉导航栏最后一项的右边距

How to get rid of right margin in last item of navigation bar using last child

html

css

pseudo-class