网格属性不适用于网格容器内的元素
网格属性不适用于网格容器内的元素
提问于 2017-10-18 07:08:32
我正在尝试定位一个嵌套的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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-18 07:52:47
的作用域仅限于父子关系。
这意味着网格容器始终是父级，而网格项始终是子级。网格属性仅在此关系中有效。
子网格容器之外的网格容器的后代不是网格布局的一部分，也不接受网格属性。
您正在尝试将网格属性应用于作为网格容器的子代而不是子代的元素。这些元素超出了网格布局的范围。
底线:您总是需要将display: grid或display: inline-grid应用于父对象，才能将网格属性应用于子对象。
请注意，网格项也可以是网格容器。
另请参阅：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46800525
复制相关文章
相似问题