html - 使用 CSS 均匀间隔相邻子项

Question

我需要将一组 li 元素的间距相等。需要注意的是，某些元素可以通过 CSS 类隐藏。

<ul class="list-spacing">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

我的CSS如下:

.list-spacing > li + li {
  margin-top:10px;
}

输出看起来不错。请参阅此处的 fiddle : https://jsfiddle.net/njphghpa/

现在正如我提到的，一些 li 可以通过类隐藏，如下所示:

<ul class="list-spacing">
  <li class='hidden'>One</li>
  <li>Two</li>
  <li>Three</li>
  <li class='hidden'>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

现在，我们为第二个 li(包含 Two)获得了不必要的 10px 上边距。 请参阅此处的 fiddle :https://jsfiddle.net/mL11uogw/

所以我这样做了:

.list-spacing > li:first-child.hidden + li {
  margin-top:0;
}

请参阅此处的 fiddle :https://jsfiddle.net/zuLhome9/ 看起来又不错。

但问题是当前两个或三个li被隐藏时，上面的方法不起作用。 -https://jsfiddle.net/arryv6go/

我尝试了一种不同的方法 - 将 ul 的上边距设置为 -10px 并将所有子项的上边距设置为 10px 这发生:https://jsfiddle.net/yzbnvmez/ ，只要 ul 没有边框就可以。但我想要一个。

有什么办法可以解决这个问题吗？

Answer 1

这是我能想到的最简单的解决方案:

您需要将 margin-top:10px 添加到每个 li 元素，然后通过设置 ::before< 删除列表顶部的间隙 伪元素 margin-top 为 -10px

.list-spacing::before {
  content: "";
  display: block;
  margin-top: -10px;
}
.list-spacing > li {
  margin-top:10px;
}

fiddle :https://jsfiddle.net/JacobDesight/njphghpa/3/