时间戳

首页 > 解决方案 > 显示：网格；导致宽度问题忽略css宽度属性

html - 显示：网格；导致宽度问题忽略css宽度属性

问题描述

代码

我有一个<nav>, <main>, <footer>[按此顺序] 嵌套在我的<body>. 我的<main>or没有问题<footer>。这是导航的 HTML：

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  height: 100%;
  display: grid;
  place-items: center;
}

nav {
  max-width: 90%;
}

.title-container {
  display: grid;
  place-items: center;
  height: 12rem;
}

.nav-link-container {
  box-sizing: border-box;
  background: #B8B8B8;
  padding: 15px;
  height: 130px;
  overflow-y: scroll;
}

.nav-link-container>header {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.nav-link-container>header:last-child {
  margin-bottom: 0px;
}
<nav id="navbar">
  <div class="title-container">
    <header>
      <h1 class="title red">Git & GitHub Basics</h1>
      <h1 class=title light>Learning Git</h1>
    </header>
  </div>
  <div class=nav-link-container>
    <header><a class="nav-link" href="#Understanding_the_Workflow">Understanding the Workflow</a></header>
    <header><a class="nav-link" href="#Initializing_a_Repository_&_Staging_Files">Initializing a Repository & Staging Files</a></header>
    <header><a class="nav-link" href="#Status,_Unstaging_Files,_&_Committing">Status, Unstaging Files, & Committing</a></header>
    <header><a class="nav-link" href="#Comparing_Files_Changes">Comparing Files Changes</a></header>
    <header><a class="nav-link" href="#GitHub_&_Using_Clone,_Push,_&_Pull">GitHub & Using Clone, Push, & Pull</a></header>
  </div>
</nav>

问题

<nav>宽度似乎仅限于“虚构”边界，它停留在 325.8px 并且不会超过该边界。目标是<nav>达到浏览器宽度的 90%。

尝试过的解决方案

当我删除时display: grid;，问题就解决了。display: grid;不会对文档的其余部分造成问题；其余的功能如预期。删除所有 css<nav>并不能解决问题。

也许有人可以解释为什么display: grid会导致问题？

标签： htmlcsscss-gridnav

解决方案

尝试在导航中替换max-width: 90%为：width: 90%

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    height: 100%;
    display: grid;
    place-items: center;
}

nav {
    width: 90%;
}

.title-container {
    display: grid;
    place-items: center;
    height: 12rem;
}

.nav-link-container {
    box-sizing: border-box;
    background: #B8B8B8;
    padding: 15px;
    height: 130px;
    overflow-y: scroll;
}

.nav-link-container > header {
    display: flex;
    /*justify-content: center;*/
    margin-bottom: 16px;
}

.nav-link-container > header:last-child {
    margin-bottom: 0px;
}
<nav id="navbar">
    <div class="title-container"><header><h1 class="title red">Git & GitHub Basics</h1><h1 class=title light>Learning Git</h1></header></div>
    <div class=nav-link-container>
        <header><a class="nav-link" href="#Understanding_the_Workflow">Understanding the Workflow</a></header>
        <header><a class="nav-link" href="#Initializing_a_Repository_&_Staging_Files">Initializing a Repository & Staging Files</a></header>
        <header><a class="nav-link" href="#Status,_Unstaging_Files,_&_Committing">Status, Unstaging Files, & Committing</a></header>
        <header><a class="nav-link" href="#Comparing_Files_Changes">Comparing Files Changes</a></header>
        <header><a class="nav-link" href="#GitHub_&_Using_Clone,_Push,_&_Pull">GitHub & Using Clone, Push, & Pull</a></header>
    </div>
</nav>

推荐阅读