CSS 列表项彼此相邻

在 CSS 中，可以使用 margin 和 padding 属性来控制列表项之间的间距。但有时候，希望列表项之间的间隔由它们自己来控制，而不是整体控制。这时可以使用 display 属性和 ::before 伪元素来实现。

使用 display: table

可以将列表项的 display 属性设置为 table，然后在每个列表项前添加一个空的 ::before 伪元素，并将其 display 属性设置为 table-row，这样就可以使每个列表项都独占一行，彼此之间相邻。

ul {
  display: table;
}

li::before {
  content: "";
  display: table-row;
}

使用 display: flex

另一种方法是将列表项的 display 属性设置为 flex，然后在每个列表项前添加一个空的 ::before 伪元素，并将其 flex 属性设置为 1，让它们平分容器的宽度。

ul {
  display: flex;
}

li::before {
  content: "";
  flex: 1;
}

示例

以下是一个完整的示例，将 ul 中的列表项彼此相邻，并且每个列表项的背景色交替显示。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
}

li {
  background: #eee;
  padding: 1em;
}

li:nth-child(odd) {
  background-color: #ccc;
}

li::before {
  content: "";
  display: table-row;
}

效果如下：

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

以上示例中使用了 nth-child 伪类来交替显示背景色，如果不需要这个功能，则可以省略。