如何让缩进列表项的子元素撑满父容器宽度且不破坏文档流

针对你提出的需求——让<li>中的.full-width元素占据父容器全宽、覆盖黄色背景、保持在文档流中且不依赖JavaScript，这里有一个纯CSS的可行方案：

核心思路 #

利用负外边距配合动态宽度计算，抵消列表的左侧内边距，同时扩展元素宽度以填满父容器。对于嵌套列表，我们通过层级选择器调整偏移量和宽度，确保每一层的红色区域都能完全覆盖黄色背景。

完整代码实现 #

CSS 样式

.list { 
  background: yellow; 
}
.full-width { 
  background: red;
  /* 顶级列表的全宽处理：抵消ul的40px padding-left，同时扩展宽度 */
  margin-left: -40px;
  width: calc(100% + 40px);
}
.list ul { 
  padding-left: 40px; 
}
/* 处理嵌套列表的情况：内层ul额外增加了40px padding，所以偏移量和宽度都要翻倍 */
.list ul .full-width {
  margin-left: -80px;
  width: calc(100% + 80px);
}
/* 如果有更多层级的嵌套，可以继续添加类似选择器，比如三级列表：
.list ul ul .full-width {
  margin-left: -120px;
  width: calc(100% + 120px);
}
*/

HTML 结构（保持你原有的结构不变）

<ul class="list">
 <li>Lorem</li>
 <li>Ipsum</li>
 <li>This text <div class="full-width"> full width (no yellow on the left side)<br> and random height (in document flow) </div> continues here and does not start a new &lt;li&gt;. </li>
 <li> Lorem <ul>
 <li>Ipsum</li>
 <li>This text <div class="full-width"> full width (no yellow on the left side)<br> and random height (in document flow) </div> continues here and does not start a new &lt;li&gt;. </li>
 <li>Lorem</li>
 </ul> </li>
</ul>

方案优势 #

• 完全不依赖JavaScript，纯CSS实现
• 元素保持在文档流中，不会破坏后续内容的布局，高度会自动撑开父元素
• 不受视口缩放影响，所有计算都基于父容器的尺寸和固定内边距
• 红色区域完全覆盖黄色背景，符合需求

原理说明 #

• margin-left: -40px：让.full-width元素向左移动，刚好抵消掉<ul>的padding-left:40px，消除左侧的黄色区域
• width: calc(100% + 40px)：将元素宽度设置为自身原有宽度（100%）加上向左偏移的40px，刚好填满整个<ul>的宽度
• 嵌套列表的处理：因为内层<ul>又增加了40px的左侧内边距，所以对应的.full-width需要更大的负外边距和宽度来抵消多层偏移

内容的提问来源于stack exchange，提问作者Christoph Bühler