CSS-网格问题使导航栏中的内容对齐

Question

我正在使用css-网格完成一项任务，部分条件是完全使用CSS-grid和html构建网站，然而，当我试图将导航栏项目与css-网格对齐时，我仍然会遇到一个问题，即链接只停留在原来的位置。如果有用的话，我已经创建了一个codepen.io：https://codepen.io/spatrick195/pen/XBzYJe

<div class="page-layout">
  <div class="top-nav">
    <div id="nav-brand"><a id="nav-brand" href="#">SR-2018</a></div>
    <div class="nav-links">
        <a class="nav-links" href="#">Login</a>
        <a class="nav-links" href="#">Sign Up</a>
    </div>
  </div>
</div>

CSS：

* {
margin: 0;
padding: 0;
}
.page-layout{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}

.top-nav{
grid-column: span 3;
padding: .5rem 1rem;
background-color: #FAFAFA;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

a{
text-decoration: none;
}

#nav-brand{
grid-column: 1;
}

.nav-links{
grid-column: 3;
}

Answer 1

1)在top-nav div上设置网格容器属性

.top-nav{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;

    /* decorative properties */
    padding: .5rem 1rem;
    background-color: #FAFAFA;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

之所以出现这种情况，是因为网格容器属性只适用于它的直接子级(正如@David在注释中已经指出的那样)。

2)将nav链接上的类从nav-links重命名为nav-link

​

* {
  margin: 0;
  padding: 0;
}

.top-nav {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: .5rem 1rem;
  background-color: #FAFAFA;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

a {
  text-decoration: none;
}

#nav-brand {
  grid-column: 1;
}

.nav-links {
  grid-column: 3;
}

<div class="page-layout">
  <div class="top-nav">
    <div id="nav-brand"><a id="nav-brand" href="#">SR-2018</a></div>
    <div class="nav-links">
      <a class="nav-link" href="#">Login</a>
      <a class="nav-link" href="#">Sign Up</a>
    </div>
  </div>
</div>

​

Answer 2

不完全确定你想要的最终设计是什么样子。但是如果我正确地理解了你，你就是在寻找类似于这个码页的东西。

我为您添加了以下代码和html中的id="nav-bar" -链接容器。

#nav-bar {
  display: flex;
  text-align: center;
  flex: 1;
}
#nav-bar > .nav-links {
  text-align: center;
  flex: 1;
}

网格与挠曲箱一起使用。因此，您可以在单个网格单元上使用flexbox来对齐您想要的内容。

根据您之后的情况，您可以查看下面的钢笔，其中flex设置在另一项上：都在同一条线上