导航元素不受display: grid影响-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

导航元素不受display: grid影响

P粉295728625 2023-09-20 12:05:51

[CSS3讨论组]

929

我在一个设置为网格显示的导航栏中有一些ul li元素，但它不像我预期的那样工作。li元素显示出来好像没有应用网格。

这是代码：

* {
  padding: 0;
  margin: 0;
}

.grid-container {
  display: inline-grid;
  grid-auto-columns: auto auto auto auto;
  text-decoration: none;
}

.grid-container li {
  list-style: none;
}

<nav class="grid-container">
  <ul>
    <li class="grid-item one"><a href="#">Jenish Potsangbam</a></li>
    <li class="grid-item two"><a href="#">Socials</a></li>
    <li class="grid-item three"><a href="#">Resume</a></li>
  </ul>
</nav>

但是当我将grid-container类应用于ul元素而不是nav时，它正常工作。

有人能解释一下它们的区别吗？如果我想将nav设置为display: grid，应该如何做？

P粉295728625

全部回复(1)

P粉3216766402023-09-21 09:41:52 1楼

因为nav只有一个子元素(ul)，所以(display:grid)的效果只会出现在ul上，如果你想将li视为网格盒子，你应该给ul添加class(grid-container)而不是nav，以获得正确的效果

请记住，display grid的效果只会出现在子元素上，所以无法给nav添加display grid并在li上看到效果，因为li不是nav的子元素

请参考以下代码

* {
  padding: 0;
  margin: 0;
}

.grid-container {
  display: inline-grid;
  grid-auto-columns: 100px 100px 100px 100px;
  grid-auto-rows: 100px 100px 100px 100px;

  text-decoration: none;
}

.grid-container li {
  list-style: none;
}

<nav>
  <ul class="grid-container">
    <li class="grid-item one"><a href="#">Jenish Potsangbam</a></li>
    <li class="grid-item two"><a href="#">Socials</a></li>
    <li class="grid-item three"><a href="#">Resume</a></li>
  </ul>
</nav>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>