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

输出看起来不错。请看这里的小提琴： 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（包含两个）获得了10px的不必要的上边距。请参阅此处的小提琴：https://jsfiddle.net/mL11uogw/

所以我这样做了：

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

请参阅此处的小提琴：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;
}

小提琴：https://jsfiddle.net/JacobDesight/njphghpa/3/

Answer 2

您可以使用flexbox来解决此问题。

.hidden {
  display: none;
}
.list-spacing{
  margin: 0;
  padding: 0;
  border: solid 1px red;
}
ul {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

li {
  list-style: none;
  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>

Answer 3

实现目标的最简单且最强大的方式是使用您在答案末尾提到的技术，使用ul元素上的负上边距。负边距是完全有效的，see w3.org margin properties 虽然它需要添加一个父元素，以防止前一个和下一个兄弟重叠，并在所有元素周围给出一个边框。以下是您的标记示例：

.wrap {
  overflow: hidden;
  border: solid 1px red;
}

.list-spacing {
  margin: -10px 0 0;
  padding: 0;
}

.list-spacing>li {
  margin-top: 10px;
  border:1px solid green;
}

.hidden {
  display: none;
}

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

Answer 4

这个选择器可以满足你的需要：

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

https://jsfiddle.net/pbzg39wg/1/

Answer 5

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

使用排除:not()类所有元素的.hidden选择器。

Answer 6

KISS：保持简单，愚蠢是我的工作口号。如何用margin-top替换margin-bottom？这应该可以解决你的问题。

为了保证所有内容的边距为0，那么ul上的负边距是web-tiki建议的最佳选择。

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

https://jsfiddle.net/3fsofxa8/

使用CSS同等地隔离儿童

6 个答案: