代码之家 › 专栏 › 技术社区 › Interlated

CSS网格,如何将子单元格视为网格单元格?

css3 css

0

Interlated · 技术社区 · 8 年前

我有菜单结构

<ul class="menu">
  <li>
    menu item
    <ul class="menu">
      <li>menu item</li>
    </ul>
  </li>
</ul>

如果我设置外部菜单项display:grid,默认情况下,单元格将只是顶部的“li”。如何将结构展平以生成所有“li”项网格单元?

2 回复 | 直到 8 年前

1

FelipeAls 8 年前

可以使用将中间元素声明为“甚至不存在” display: contents (见 article on bitsofco.de )它在视觉上扁平化子列表,因为如果子列表 li 还有孙子 ul 不再是网格项,然后是文本节点和大孙子 锂 现在是网格项,但它导致 huge problems related to semantics and accessibility 因为它现在已经在浏览器中实现了。
例如,您不应该首先将HTML代码中的层次结构从视觉上扁平化。

CSS解决方案: codepen

.menu_outer {
  display: grid;
  max-width: 20rem;
  border: 1px solid darkblue;
  padding-left: 0;
}

.menu_outer > li,
.menu_outer .menu {
  display: contents;
}

.menu > li {
  background-color: lightblue;
}

/* styling */
li {
  list-style-type: none;
}

<ul class="menu_outer">
  <li>
    menu item
    <ul class="menu">
      <li>menu item</li>
    </ul>
  </li>
</ul>

支持 display: contents 是部分的:火狐(在新版本中可以访问)、Chrome和Safari(引擎盖下的Buggy),但不是边缘和lol@ie

2

0

Aniket Inge 8 年前

这个怎么样?

.menu li { display: grid; }