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

Question

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

cssflexboxnavigationcss-gridnav

4

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

我考虑基于网格线实现导航分隔符，但我不知道是否可能，并且这可能会被视为不良实践。

我的设计在最右边的元素“name”上留下了一个border-right，这是不希望出现的。我尝试使用nth-child禁用它，但没有效果。

除了使用border属性之外，是否有更好的方法在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>

- commissioneranthony

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aaronburrows · Accepted Answer

我会将每个链接放入一个列表中。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>