html - 如何使用 :last-child 类在导航栏底部对齐我的内容？

Question

我想在我的导航栏底部有一个深色（/浅色）模式选项卡。这似乎比我想象的要难。使用bottom:0会将我的内容放在页面底部，这不是我想要的，使用margin-top: auto;也似乎根本不起作用。我对此很陌生，对不起。这是我的简单 HTML，为了让我们忽略 light-mode 如何与 html 链接一起工作，计划稍后再做。

nav {
  grid-area: nav;
  padding: .75rem;
  overflow: auto;
  grid-row-end: 5;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin-bottom: .75rem;
}

nav a {
  text-decoration: none;
  display: block;
  border: 2px solid var(--color-green);
  padding: .5rem;
}

nav a:hover {
  border-color: var(--color-white);
  color: var(--color-white);
}

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="Vorstellungen.html">Vorstellungen</a></li>
    <li><a href="Trailer.html">Trailer</a></li>
    <li><a href="Kontakt.html">Kontakt</a></li>
    <li><a href="Links.html">Links</a></li>
    <li><a href="Light-Mode.html">Light-Mode</a></li>
  </ul>
</nav>

我不完全确定这是否是我的网格的问题，如果是，我可以发布更多信息。但我所需要的基本上是我的最后一个列表项位于导航的最底部，而不是我的页面。谢谢阅读。

这是没有 :last-child classes 或 bottom:0 的样子：

标签： htmlcsshtml-listsnavbar