我正在尝试定位一个嵌套的li
(ul li ul li
)在最上面的ul
上创建的CSS Grid上。还没有爱(它不起作用)。也许这是不可能的,或者我错过了什么?
#orgChart ul.orgChartLevel1 {
display: grid;
grid-template-columns: 12px auto;
grid-template-rows: 100px auto auto;
grid-row-gap: 30px;
}
#orgChart li.orgChartLevel2b {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
<ul class="orgChartLevel1">
<li class="orgChartLevel1a">
<ul class="orgChartLevel2">
<li class="orgChartLevel2b">
</li>
</ul>
</li>
</ul>
发布于 2017-10-18 07:52:47
的作用域仅限于父子关系。
这意味着网格容器始终是父级,而网格项始终是子级。网格属性仅在此关系中有效。
子网格容器之外的网格容器的后代不是网格布局的一部分,也不接受网格属性。
您正在尝试将网格属性应用于作为网格容器的子代而不是子代的元素。这些元素超出了网格布局的范围。
底线:您总是需要将display: grid
或display: inline-grid
应用于父对象,才能将网格属性应用于子对象。
请注意,网格项也可以是网格容器。
另请参阅:
https://stackoverflow.com/questions/46800525
复制相似问题