缩进项到的母体全宽伸展子[关闭]

Question

列表项（<li>）应该能够举办儿童（<div class="full-width">），即采取在一定宽度的父母不中断文档流程。

• 该解决方案不应该通过调整视口的影响。
• 它不应涉及任何JavaScript。

红色部分应该没有其他任何更改重叠黄色部分：

.list { background: yellow; }
.full-width { background: red; }
.list ul { padding-left: 40px; }

<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阴性切缘等于左侧偏移。这工作，但我想实现它没有JavaScript。
• 定位元素绝对的。问题是，该元素将取出的公文流转。
• 关闭<li>标签和DIV后重新打开它们。该解决方案几乎是完美的，但在div后的内容（“在这里继续，并且不启动新的<li>”）启动一个新的<li>标签。

任何建议将不胜感激。

Answer 1

甲裕量，等于当前列表项的偏移的倒数值可以应用：

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

.list { background: yellow; }
.full-width { background: red; }
.list ul { padding-left: 40px; }
.list li .full-width { margin-left: -40px; }
.list li li .full-width { margin-left: -80px; }

<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>