html - float 图像旁边的嵌套列表项的缩进

Question

我在 float 图像旁边放置了嵌套列表。 float 图像“消耗”了嵌套列表的所有左边距。有什么方法可以使嵌套列表从图像向外缩进，就好像那里没有图像一样？

截图如下:

在左边我们有一个 float 时它是如何呈现的。右边是没有 float 时的渲染方式。

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

谢谢!

Answer 1

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

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

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

通过将溢出样式设置为 auto这让我得到了部分修复。该列表及其所有子项开始在图像旁边正确缩进，但由于某种原因，所有顶级元素符号都消失了。 This other post让我尝试调整有效列表的填充!总之，我所要做的就是将开始标签从 <ul> 更改为至 <ul style="overflow:auto; padding:0 0 0 1em;"> .

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