Question

我正在使用CSS Grid，并且试图将菜单项放置在网格的第二列中。我有这样的东西：

header {
    grid-area: header;
}
footer {
    grid-area: footer;
}
nav{
    grid-area:nav;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

/* Resets */
:root {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
}

body {
      display:grid;
  grid-template-columns:[first] 1rem [sidebar] fit-content(10%) [content] auto;
  column-gap: 1rem;
  grid-template-areas: "header header header" "nav nav nav" ". aside main" "footer footer footer";
}

header {
  background-color: blue;
}

nav {
  background-color: red;
}

aside {
  height: fit-content;
  margin: 1rem 0 0 0;
}

main {
  background-color: orange;
}

footer {
  background-color: purple;
}

<html>

<body>
  <header>
    <h1>Header</h1>
  </header>
  <nav>
    <ul>
      <li>Item</li>
      <li>Item 2</li>
    </ul>
  </nav>
  <aside><div>Aside content</div></aside>
  <main><div>Main content here</div></main>
  <footer>
    <div>Footer content</div>
    <footer>
</body>

</html>

基本上，我希望导航栏中的列表与<main>元素中的内容对齐；我已经阅读了CSS技巧指南，但无法将其包裹住。有什么建议吗？

Answer 1

更新后的答案：

在margin-left元素上添加ul。

margin-left: 7rem;
padding: 0;
list-style-position: inside;

旧答案：

需要对CSS进行以下更改。

您要添加两个点以分隔导航区域。

grid-template-areas: "header header header" ". . nav" ". aside main" "footer footer footer";

以下内容将使该行与最上面的行对齐。

aside {grid-row-start: 2;}

根据网格对齐菜单中的内容

1 个答案: