Question

CSS网格：如何在父元素宽度上跨越网格单元？

在以下CSS代码中，#nav { }不会使#nav元素水平地跨越整个父元素宽度。如果#nav元素包含更多内容，则它将跨越整个父元素宽度。有没有办法让此元素仅使用下面html中的内容来覆盖整个屏幕？

任何帮助将不胜感激。

CSS：

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

.body  {
  display: grid;
  grid-template-rows: fr, fr, fr, fr, fr;
  grid-template-columns: fr, fr;

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

  color: white;
  background-color: hsl(0, 100%, 28%);
  font-family: verdana, sans-serif;
}

@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}

#planb {
  background-color: grey;
}

#header {
  display: flex;
  flex-direction: row;
  grid-area: header;
  justify-content: space-evenly;
  color: gold;
}

#nav {
  display: flex;
  flex-direction: row;
  grid-area: nav;
  justify-content: space-evenly;
  list-style-type: none;
  background-color: black;
}

#main {
  grid-area: main;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-bottom: 5%;
  color: gold;
  border: solid 1px;

}

#details {
  grid-area: details;
  margin-right: 10%;
  margin-left: 10%;

}

#about {
  grid-area: about;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#aside {
  grid-area: aside;
  margin-top: 5%;
  margin-left: 10%;
  padding-top: 1.7%;
}

#footer{
  grid-area: footer;
  margin-top: 5%;
  margin-left: 10%;
}

li {
  padding-right: 1 rem;
}

th {
  text-align: left;
}

td {
  text-align: right;
  color: white;
}

dt {
  font-weight: bold;
}

a:link, a:visited {
  color: gold;
}

a:focus, a:hover, a:active {
  color: grey;
}

#header, #nav, #main, #details, #about, #aside {
  border: solid 1px;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="body">
  <header id="header">
    <p>this is the header</p>
  </header>
  <nav>
    <ul id="nav">
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="main">
    <main>
      <table>
        <tr>
          <th><p>this is the table</p></th>
        </tr>
      </table>
    </main>
  </section>
  <section id="details">
    <p>this is the details</p>
  </section>
  <section id="about">
    <p>this is the about</p>
  </section>
  <aside id="aside">
    <p>this is the aside</p>
  </aside>
  <footer id="footer">
    <p>this is the footer</p>
  </footer>
</body>
</html>

Answer 1

解决方案：

将id属性id="nav"从<ul>元素移到<nav>元素。

CSS：

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

.body  {
  display: grid;
  grid-template-rows: fr, fr, fr, fr, fr;
  grid-template-columns: fr, fr;

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

  color: white;
  background-color: hsl(0, 100%, 28%);
  font-family: verdana, sans-serif;
}

@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}

#planb {
  background-color: grey;
}

#header {
  display: flex;
  flex-direction: row;
  grid-area: header;
  justify-content: space-evenly;
  color: gold;
}

#nav {
  grid-area: nav;
  color: gold;
  background-color: black;
}

#nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  color: gold;
}

#main {
  grid-area: main;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-bottom: 5%;
  color: gold;
  border: solid 1px;

}

#details {
  grid-area: details;
  margin-right: 10%;
  margin-left: 10%;

}

#about {
  grid-area: about;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#aside {
  grid-area: aside;
  margin-top: 5%;
  margin-left: 10%;
}

#footer{
  grid-area: footer;
  margin-top: 5%;
  margin-left: 10%;
}

#header, #nav, #main, #details, #about, #aside, #footer {
  border: solid 1px;
  height: 100%;
  width: 100%
}

th {
  text-align: left;
}

td {
  text-align: right;
  color: white;
}

dt {
  font-weight: bold;
}

a:link, a:visited {
  color: gold;
}

a:focus, a:hover, a:active {
  color: grey;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="body">
  <header id="header">
    <p>this is the header</p>
  </header>
  <nav id="nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="main">
    <main>
      <table>
        <tr>
          <th><p>this is the table</p></th>
        </tr>
      </table>
    </main>
  </section>
  <section id="details">
    <p>this is the details</p>
  </section>
  <section id="about">
    <p>this is the about</p>
  </section>
  <aside id="aside">
    <p>this is the aside</p>
  </aside>
  <footer id="footer">
    <p>this is the footer</p>
  </footer>
</body>
</html>

CSS网格：如何跨父元素宽度跨越网格单元？

1 个答案: