html - 在列中渲染父 列表(显示 : grid vs. 列计数 : 3). 我得到错误的顺序或子 的奇怪形状

Question

好的，所以我需要将嵌套的 ul/li 呈现为 3 列。

我想用纯 CSS(而不是 JS)来做到这一点，我有 2 个半工作示例。

示例 1 通过 display: grid 👉🏻 https://jsfiddle.net/slick/1rtucfmL/2/

因此，对于父 ul，您只需指定 display: grid 和 grid-template-columns: 1fr 1fr 1fr 并且您有 3 列。当您将鼠标悬停在元素上时，子 ul 会很好地呈现。

然而，此示例存在水平呈现元素的问题(不希望那样):

a b c
d e f
g h i

而不是垂直(这是我需要的):

a d g 
b e h
c f i

Someone asked this before and the solution is to define qty. of rows .我不能这样做，因为我有动态数量的行并且我不想硬编码任何值。

所以我去了第二个例子......

示例 2 通过 column-count: 3 👉🏻 https://jsfiddle.net/slick/g5p2j8bo/2/

这会按照我的意愿呈现列项，从 A 到 Z 垂直。然而，问题是当您将鼠标悬停在元素上时，子 ul 以一种非常奇怪的方式显示(有时它也被分成几列，我不希望这样)。

如果我能解决这个子定位问题，那么示例 2 就能满足我的需要。

我不知道为什么会这样。我尝试设置 column-count: 1 因为我认为它可能从父级继承 3 但这没有帮助。

有什么提示吗？谢谢!

Answer 1

可以避免中断，因此您的 css 代码应该像这样

ul#root li>ul {
  top: -12px;
  left: 190px;
  position: absolute;
  break-inside: avoid;  // added
  page-break-inside: avoid;  // added
  will-change: transform;  // added
  visibility: hidden;
  z-index: 1;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  list-style: none;
  width: 190px;
  padding: 10px 0;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .02em;
}

无法添加代码段，因为正文限制，但是 here is a fiddle .