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>

将缩进项的子项拉伸到父项的整个宽度

1 个答案: