CSS网格模板中的边距

问题描述 投票：0回答：2

在<div> .item1，我把我的导航和简单的文字I'm Header。我想把这两件事稍微提一下。我尝试使用边距，但找不到使用它们的好解决方案。

CodePen:

/*
  Oh Hello!

  These are some base styles so that our tutorial looks good.

  Let's go through the important bits real quick
*/

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
}


/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 10px 100px;
}


/* Each item in our grid will contain numbers */

.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 1px solid blue;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 445px 250px 250px 200px 250px 150px;
  grid-template-areas: "o1 o1" "o2 o3" "o2 o3" "o4 o4" "o5 o6" "o7 o7"
}

.item1 {
  grid-area: o1;
  text-align: center
}

.menu ul {
  display: flex;
  list-style: none;
  color: #582782;
  margin: 0;
}

.menu a {
  display: block;
  text-decoration: none;
  padding: 10px;
  font-size: 0.95rem;
  color: #582782;
}

.item6 {
  grid-area: o4;
}

.footer {
  grid-area: o7;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/style.css">
  <title>Starter Files and Tooling Setup!</title>
</head>

<body>
  <div class="container">
    <div class="item item1">
      <nav class="menu">
        <ul id="menu-list">
          <li>
            <a href="">PROJECTS</a>
          </li>
          <li>
            <a href="">TEAM</a>
          </li>
          <li>
            <a href="">MISSION</a>
          </li>
          <li>
            <a href="">CONTACT</a>
          </li>
        </ul>
      </nav>
      <p>I'm Header</p>
    </div>
    <div class="item item2">
      <p>Experience</p>
    </div>
    <div class="item item3">
      <p>img</p>
    </div>
    <div class="item item4">
      <p>I'm Sidebar #4</p>
    </div>
    <div class="item item5">
      <p>img</p>
    </div>
    <div class="item item6">
      <p>Header 2</p>
    </div>
    <div class="item item7">
      <p>I'm Sidebar #7</p>
    </div>
    <div class="item item8">
      <p>I'm Sidebar #8</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
</body>

</html>

请关注.item1。

如何移动导航？

html css css-grid
2个回答
1
投票

div.item1也有类item，其中包含规则align-items: center。

你可以使用.item1否决它为align-items: normal

/*
  Oh Hello!

  These are some base styles so that our tutorial looks good.

  Let's go through the important bits real quick
*/

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
}


/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 10px 100px;
}


/* Each item in our grid will contain numbers */

.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 1px solid blue;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 445px 250px 250px 200px 250px 150px;
  grid-template-areas: "o1 o1" "o2 o3" "o2 o3" "o4 o4" "o5 o6" "o7 o7"
}

.item1 {
  grid-area: o1;
  text-align: center;
  align-items: normal;
}

.menu ul {
  display: flex;
  list-style: none;
  color: #582782;
  margin: 0;
}

.menu a {
  display: block;
  text-decoration: none;
  padding: 10px;
  font-size: 0.95rem;
  color: #582782;
}

.item6 {
  grid-area: o4;
}

.footer {
  grid-area: o7;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/style.css">
  <title>Starter Files and Tooling Setup!</title>
</head>

<body>
  <div class="container">
    <div class="item item1">
      <nav class="menu">
        <ul id="menu-list">
          <li>
            <a href="">PROJECTS</a>
          </li>
          <li>
            <a href="">TEAM</a>
          </li>
          <li>
            <a href="">MISSION</a>
          </li>
          <li>
            <a href="">CONTACT</a>
          </li>
        </ul>
      </nav>
      <p>I'm Header</p>
    </div>
    <div class="item item2">
      <p>Experience</p>
    </div>
    <div class="item item3">
      <p>img</p>
    </div>
    <div class="item item4">
      <p>I'm Sidebar #4</p>
    </div>
    <div class="item item5">
      <p>img</p>
    </div>
    <div class="item item6">
      <p>Header 2</p>
    </div>
    <div class="item item7">
      <p>I'm Sidebar #7</p>
    </div>
    <div class="item item8">
      <p>I'm Sidebar #8</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
</body>

</html>
1
投票

您可以添加以下CSS规则

.item1 nav,
.item1 p
{
  align-items: start;
}

这将告诉两个孩子将他们的内容对齐到开头，但没有其他任何东西会受到影响。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.