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

Question

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

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

我的设计在最右边的元素 "name" 上留下了 border-right，这是不可取的。我尝试使用 nth-child 来禁用它，但没有效果。

有没有比使用边框属性更好的方法来分隔 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>

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

CSS Grid Navigaton Bar - How to properly add Button Separators?

css

navigation

nav

flexbox

css-grid