Html 使用CSS平均分隔相邻的子对象

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

输出看起来不错。请看这里的小提琴：

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

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

<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>

请看这里的小提琴： 看起来不错

但问题是，当前两个或三个李被隐藏时，上述方法不起作用

我尝试了一种不同的方法——将ul的上边缘设置为-10px，将所有子级的上边缘设置为10px，这种情况会发生：，只要ul没有边界就可以了。但是我想要一个

---

有没有办法解决这个问题？

您可以使用flexbox来解决这个问题

.隐藏{ 显示：无； } .列表间距{ 保证金：0； 填充：0； 边框：实心1px红色； } 保险商实验室{ 显示器：flex； 柔性流动：柱； 调整内容：灵活启动； 调整项目：灵活启动； } 李{ 列表样式：无； 边缘顶部：10px； } 一 二 三 四 五 六

---

此选择器应执行您需要的操作：

.list-spacing > li:not(.hidden) + li,  
.list-spacing > li:not(:first-of-type) + li{
  margin-top:10px;
}

使用：not选择器排除所有具有.hidden类的元素。

实现目标的最简单和最可靠的方法是使用您在答案末尾提到的技巧，在ul元素上使用负上边距。负边距是完全有效的，顺便说一句。 尽管它需要添加父元素以防止上一个和下一个同级重叠，并在所有元素周围提供边框。下面是一个标记示例：

.包裹{ 溢出：隐藏； 边框：实心1px红色； } .列表间距{ 利润率：-10px0； 填充：0； } .列表间距>li{ 边缘顶部：10px； 边框：1px纯绿色； } .隐藏{ 显示：无； } 一 二 三 四 五 六

---

吻：保持简单，愚蠢是我的工作咒语。将页边顶部替换为页边底部如何？那会解决你的问题

要使所有内容都保持零利润，那么，正如web tiki所建议的，ul上的负利润是最好的选择

ul{ margin-bottom: -10px; margin-top: 0; }
li{ margin-bottom: 10px; }

---

以下是我能想到的最简单的解决方案：

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

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

---

小提琴手：

谢谢杰拉德，但我希望间距为10px。只要ul元件上没有设置高度，这就行不通。很好！但是如果一行中有两个隐藏的元素，它就不会起作用：你的咒语也是我的咒语！但是我在UL的底部有一个额外的间隙。我希望最后一个LI触及下边框。谢谢-但我仍然失去了下边框-这与我在问题中建议的负上边框相似谢谢。这绝对是一个选择。我只是想知道是否有任何css黑客可以在没有其他元素的情况下实现这一点。如果你的ul有一个固定的高度，你可以选择flexbox解决方案，否则除了这个解决方案，我没有其他建议。很好！这样，就不需要父元素+1非常好。谢谢

.list-spacing > li:not(.hidden) {
  margin-top:10px;
}

ul{ margin-bottom: -10px; margin-top: 0; }
li{ margin-bottom: 10px; }

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