css - 列表元素内 float 元素的技巧

Question

我正在尝试使用有序列表 (ol) 创建指令列表。在内部，我希望说明的文本向左浮动，显示步骤的图像向右浮动。

我试过像这样将内容包装在列表项 (li) 中:

    <ol>
      <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li>
    </ol>

这只是将图像发送到 li 元素之外。我尝试在 li 中的两个 float 元素之后添加一个清除 div，我尝试向 li 元素本身添加一个清晰的 hack。我还尝试过将 p 和 img 元素嵌套在 float div 中。

这可能吗？想使用这种方式，但如果没有，将生成一些其他解决方案。

Answer 1

您还可以考虑使用overflow: hidden technique ;将 overflow: hidden 添加到您的 li 将使它能够扩展以包含 float 内容。

jsFiddle here .