缩进浮动图像旁边的嵌套列表项

Question

我有嵌套列表，旁边是浮动图像。浮动图像“消耗”嵌套列表的所有左边距。是否有任何方法可以使嵌套列表从图像向外缩进，就好像那里没有图像一样？

以下是截图：

在左侧，我们知道当浮动时它是如何渲染的。在右边，我们知道当没有浮动时它是如何渲染的。

有没有办法让嵌套列表项以相同的方式向右踢，无论是否有图像浮动到左边？

谢谢！

Answer 1

你可以给子菜单留下边距..但.. 为什么不使用flexbox？

.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  border: 1px solid #999;
  background: #F2F2F2;
}
ul {
  margin: 0 30px;
  padding: 0;
}
ul > li + ul {
  margin-left: 20px;
}

<div class="container">
  <img src="http://placehold.it/200x200" alt="Imagen">
  <div class="flex-uls">
    <ul>
      <li>Top Item</li>
      <li>Top Item</li>
      <li>Top Item</li>
      <ul>
          <li>SubLevel Item</li>
          <li>SubLevel Item</li>
          <li>SubLevel Item</li>
      </ul>
    </ul>
  </div>
</div>

Answer 2

我遇到了完全相同的问题（这就是我找到这篇文章的方式），但是我终于弄明白了。查看所附的图片，以了解我在下面的解释。

以下HTML会产生与原始海报一样的错误（为简洁起见进行编辑）：

<figure style="float:left; margin:1em 4em 1em 0; width:231px;">
    <img style="box-shadow:0 1px 5px; border-radius:5px;" src=" ... .jpeg?w=231" width="231" height="300" />
    <figcaption> ... </figcaption>
</figure>

<p><strong>The Rough Plan</strong>
The app needs to have (eventually) all of the following features:</p>

<ul>
    <li>A full recipe book
        <ul>
            <li>The ability to add/remove/edit recipes.</li>
        </ul>
    </li>
    ...
    <li>Generate shopping lists.</li>
</ul>

使用浏览器的dev工具检查列表元素时，您会看到，无序列表标签的所有间距都是根据页面内容区域的大小而不是浮动图像旁边的剩余空间来衡量的。

通过将溢出样式设置为auto，我得到了部分解决。该列表及其所有子项目开始在图像旁边正确缩进，但由于某种原因，所有顶级子弹都消失了。 This other post促使我尝试调整有效列表的填充！我要做的全部工作就是将开始标记从<ul>更改为<ul style="overflow:auto; padding:0 0 0 1em;">。

很显然，您希望在样式表中完成此操作，而不是在HTML本身中完成。