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

非浮动容器不会将其内容识别为具有和宽度或高度,从而导致容器折叠到其允许的最小高度(给定任何其他CSS规则)。

对于要由包含列表元素约束的段落和图像,需要同时浮动列表元素和父排序列表。

然后,排序列表和列表元素都将减少到表示性封装内容所需的最小宽度。这可能会导致清单过于单薄。将适当的宽度应用于已排序的列表和要处理此问题的列表项。

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

您也可以考虑使用 overflow: hidden technique 添加 溢出:隐藏 对你 li 将使其能够扩展以包含浮动内容。

jsFiddle here .

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

试试这个,它帮助了我。