如何让li标签脱离文档流并成为独立可样式化容器（不新增HTML）

可以通过以下CSS实现需求，无需新增任何HTML结构：

.inside-article {
  background: gray;
  position: relative;
  /* 根据列表预估高度设置底部内边距，避免下方内容被覆盖 */
  padding-bottom: 180px;
}

.wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 绝对定位脱离文档流，从灰色容器底部开始排列 */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* 可选：给列表添加左右内边距，避免贴紧页面边缘 */
  padding: 0 15px;
}

.wp-block-post {
  background: #ffffff;
  border: 1px solid #dddddd;
  padding: 15px;
  margin-bottom: 12px;
  /* 不设置固定宽高，尺寸由内容动态决定 */
}

.meta-box {
  /* 确保元信息盒子在列表下方显示 */
  margin-top: 180px;
}

关键逻辑说明： #

• 给.inside-article设置position: relative，让它成为绝对定位元素的参考容器，同时添加padding-bottom防止下方的.meta-box被列表覆盖。
• 通过position: absolute; top: 100%让整个列表容器彻底脱离灰色背景区域，不再占用原文档流空间，视觉上完全剥离灰色背景。
• 给每个.wp-block-post添加白色背景、边框和内边距，形成独立的矩形盒子，margin-bottom实现列表项之间的分隔，不设置固定宽高，保持尺寸随内容动态变化。
• 给.meta-box设置对应margin-top，确保它在列表下方正常显示。

内容的提问来源于stack exchange，提问作者user656931