我在一個設定為網格顯示的導覽列中有一些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，該如何做？
因為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>