CSS 网格导航栏 - 如何正确添加按钮分隔符

Question

我正在设计一种新的基于 css 网格的导航，但我想知道是否有比右边框更好的方法来实现导航按钮分隔符。

我正在考虑基于网格线实现导航分隔符，但我不知道这是否可能，并且作为一种做法可能会不受欢迎。

我的设计在最右侧的元素"名称"上留下了一个边框，这是不可取的。我尝试使用第 n 个孩子来禁用它，但这没有效果。

有没有比使用边框属性更好的方法来分隔 css 网格导航栏中的按钮？我主要使用css和html进行导航。

任何意见都非常感谢。谢谢一堆！

nav {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr auto;
  padding: 0;	
  font: bold .95em Arial, sans-serif;
  background: #555555; 
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  align-items: center;
}
nav a {
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #161616;
  color: #CCC;
  padding: 10px 16px;		/*top&bott, right&left*/
}
nav a:hover {background: #2a2a2a;}
nav a.active {background: #2a2a2a;}

<nav>
  <a class="active" href="index">PROJECTS</a>
  <a href="cine">VIDEOS</a>
  <a href="photosets">PHOTOS</a>
  <a href="aboutme">ABOUT</a>
  <div></div>
  <a href="aboutme">NAME</a>
</nav>

Answer 1

我会将各个链接放入一个列表中。nav 元素是一个语义容器，但不适合显示。这是更新的 CSS，用于将最后一项移动到网格的末尾并删除边框。

nav ul {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr auto;
    padding: 0; 
    font: bold .95em Arial, sans-serif;
    background: #222222; 
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    align-items: center;
    list-style: none;
}
nav li {
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #161616;
}
nav li a {
    color: #CCC;
    text-decoration: none;
    display: inline-block;
    padding: 10px 16px;
}
nav li:last-child {
    justify-self: end;
    border-right: none;
}

下面是更新的标记。

<nav>
    <ul>
        <li><a class="active" href="index">PROJECTS</a></li>
        <li><a href="cine">VIDEOS</a></li>
        <li><a href="photosets">PHOTOS</a></li>
        <li><a href="aboutme">ABOUT</a></li>
        <li><a href="aboutme">NAME</a></li>
    </ul>
</nav>