Question

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

我当时正在考虑基于网格线实现导航分隔符，但我不知道这是否可行，并且可能会被习惯接受。

我的设计在最右边的元素“名称”上留了一个右边框，这是不希望的。我尝试使用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>

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 Grid Navigaton Bar-如何正确添加按钮分隔符？

1 个答案: