Ich habe einige Ul-Li-Elemente in einer Navigationsleiste auf Rasteranzeige eingestellt, aber es funktioniert nicht wie erwartet. Das li-Element erscheint so, als ob kein Raster angewendet würde.
Das ist der Code:
* {
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>
Aber wenn ich die grid-container-Klasse auf das ul-Element anstelle von nav anwende, funktioniert es einwandfrei.
Kann jemand den Unterschied erklären? Wie soll ich vorgehen, wenn ich die Navigation auf „display: Grid“ einstellen möchte?
因为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>