Question

我正在使用CSS-grid进行分配，部分条件是完全使用css-grid和html来构建网站，但是，当我尝试将导航栏项与css-grid对齐时，我会继续运行出现了这样的问题：链接仅停留在原始位置。如果有用，我已经创建了一个codepen.io：https://codepen.io/spatrick195/pen/XBzYJe HTML

<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

不能完全确定最终设计的外观。但是，如果我对您的理解正确，那么您正在寻找类似codepen的内容。

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

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

Grid与flexbox一起使用。因此，您可以在各个网格单元上使用flexbox来按需在其中对齐内容。

根据您的需求，您可以看一下下面的笔，其中在不同的项目上设置了柔韧性：All on same line

Answer 2

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 Thomas在评论中已经指出的那样）

2）将导航链接上的类从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>

CSS-GRID在导航栏中的内容对齐问题

2 个答案: