如何在响应式 Flex 容器的每行子元素之间自动添加分隔符（如 •）-html教程-PHP中文网

如何在响应式 Flex 容器的每行子元素之间自动添加分隔符（如 •）

通过 CSS 负边距与伪元素结合 overflow 隐藏技巧，可在不依赖 JavaScript 的前提下，为 Flex 换行容器中每行内相邻子项之间精准插入分隔符，首项前与换行后首项前均无冗余符号。

通过 css 负边距与伪元素结合 overflow 隐藏技巧，可在不依赖 javascript 的前提下，为 flex 换行容器中**每行内相邻子项之间**精准插入分隔符，首项前与换行后首项前均无冗余符号。

实现该效果的关键在于：让每个子元素都“自带”一个前置分隔符（如 •），再通过父容器的负左外边距 + 外层包装器的 overflow: hidden，将每行首个元素前多余的分隔符裁剪掉。这样既保持了语义简洁，又完全规避了 JavaScript 逻辑判断。

以下是完整、可直接运行的解决方案：



<style>
body {
  text-align: center;
  margin: 0;
}

.wrapper {
  display: inline-block;
  overflow: hidden; /* 关键：隐藏溢出的首项前分隔符 */
}

#container {
  display: flex;
  flex-flow: row wrap;
  margin-left: -10px; /* 关键：向左偏移，使首项前的 • 被 wrapper 截断 */
}

#container > div {
  margin-right: 5px; /* 子项间基础间距 */
  margin-left: 10px; /* 为 ::before 留出空间，确保 • 对齐 */
}

#container > div::before {
  content: "•";
  display: inline-block;
  margin-right: 10px;
  color: #666;
}
</style><div class="wrapper">
    <div id="container">
      <div>Apple</div>
      <div>Banana</div>
      <div>Cherry</div>
      <div>Durian</div>
      <div>Mango</div>
      <div>Pear</div>
    </div>
  </div>

✅ 工作原理简析：

每个
通过 ::before 插入 • 并设置 margin-right: 10px，形成 “• X” 结构；
#container 设置 margin-left: -10px，使所有子项整体左移 10px —— 此时第一项的 • 完全移出 .wrapper 左边界，被 overflow: hidden 裁剪；
后续同理：每行首个元素的 • 均因左移而被隐藏，其余元素的 • 则自然出现在前一元素右侧，达成“仅在行内相邻项之间显示”的效果。

⚠️ 注意事项：