列表元素中浮动元素的技巧

Question

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

我尝试将内容包装在列表项（li）中，如下所示：

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

只是将图像发送到li元素之外。我已经尝试在li中的两个浮动元素之后添加一个清除div，我尝试在li元素本身添加一个明确的hack。我也尝试将p和img元素嵌套在浮动div中。

这甚至可能吗？想用这种方式，但如果没有，还会产生一些其他解决方案。

Answer 1

您还可以考虑使用overflow: hidden technique;将overflow: hidden添加到li将使其能够展开以包含已浮动的内容。

jsFiddle here

Answer 2

非浮动容器不会将其内容识别为具有宽度或高度，导致容器在适当的其他CSS规则下折叠到其允许的最小高度。

对于要由包含列表元素约束的段落和图像，您需要浮动列表元素和父有序列表。

然后，有序列表和列表元素都将减少到表示性地封装内容所需的最小宽度。这可能会导致列表过于薄弱。将合适的宽度应用于有序列表和列表项以处理此问题。

考虑清除DOM中有序列表正下方的任何元素，以确保它们不会滑入列表的左侧或右侧。

Answer 3

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

试试这个，它帮助了我。