Html 将缩进项的子项拉伸到父项的全宽

列表项（

）应该能够承载子项（

），这些子项具有特定的父项宽度，而不会中断文档流

• 调整视口大小不应影响解决方案
• 它不应该涉及任何JavaScript

红色部分应与黄色部分重叠，不改变任何其他内容：

.list{背景：黄色；}
.全宽{背景：红色；}
.list ul{padding left:40px；}

洛勒姆
Ipsum
本文
全宽（左侧无黄色）

和随机高度（在文档流中）
在这里继续，不开始新的li。


洛勒姆

Ipsum
本文
全宽（左侧无黄色）

和随机高度（在文档流中）
在这里继续，不开始新的li。

洛勒姆

可以应用等于当前列表项偏移量倒数的边距：

.list li .full-width { margin-left: -40px; }
.list li li .full-width { margin-left: -80px; }

.list{背景：黄色；}
.全宽{背景：红色；}
.list ul{左填充：40px；}
.list li.全宽{左边距：-40px；}
.list li li.全宽{左边距：-80px；}

洛勒姆
Ipsum
本文
全宽（左侧无黄色）

和随机高度（在文档流中）
在这里继续，不开始新的li。


洛勒姆

Ipsum
本文
全宽（左侧无黄色）

和随机高度（在文档流中）
在这里继续，不开始新的li。

洛勒姆