如何在加上包装的情况下去掉导航栏中的最后一项？

假设我们有这样一个导航栏：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

首先，我们需要将导航栏包装在一个父元素中，以便根据需要修改其样式：

<div class="nav-wrapper">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
    </ul>
  </nav>
</div>

然后，我们可以使用CSS选择器 :last-child 选择导航栏中的最后一项，将其隐藏。在此之前，我们需要先将导航栏设置为 'flex” 布局，以便我们可以轻松地对其进行布局和对齐。代码如下：

.nav-wrapper nav {
  display: flex;
  justify-content: space-between;
}

.nav-wrapper nav ul li:last-child {
  display: none;
}

这样，最后一项将不会出现在导航菜单中，并且其它菜单项将会被平均分配空间。如果你想添加一个右侧悬浮区域，可以用空的 <li> 和 justify-content: space-around 解决它。

这是一个完整的示例代码：

<div class="nav-wrapper">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li style="margin-left: auto;"></li>
    </ul>
  </nav>
</div>

<style>
  .nav-wrapper nav {
    display: flex;
    justify-content: space-between;
  }

  .nav-wrapper nav ul li:last-child {
    display: none;
  }