導航元素不受display: grid影響
P粉295728625
P粉295728625 2023-09-20 12:05:51
0
1
580

我在一個設定為網格顯示的導覽列中有一些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
P粉295728625

全部回覆(1)
P粉321676640

因為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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板