我正在尝试使用有序列表 (ol) 创建指令列表。在里面我希望指令的文本向左浮动，显示步骤的图像向右浮动。
我尝试将内容包装在列表项 (li) 中，如下所示：
<ol>
<li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li>
</ol>
这只是将图像发送到 li 元素之外。我尝试在 li 内的两个浮动元素之后添加一个清除 div，我尝试向 li 元素本身添加一个 clear hack。我还尝试将 p 和 img 元素嵌套在浮动 div 中。
这甚至可能吗？想使用这种方式，但如果没有，会产生一些其他的解决方案。
【问题讨论】：
您也可以考虑使用overflow: hidden technique;将overflow: hidden 添加到您的li 将使它能够扩展以包含浮动内容。
【讨论】：
非浮动容器不会将其内容识别为具有宽度或高度，从而导致容器折叠到其允许的最小高度（给定任何其他 CSS 规则）。
对于要受包含列表元素约束的段落和图像，您需要浮动列表元素和父有序列表。
然后，有序列表和列表元素都将减小到外观封装内容所需的最小宽度。这可能会导致列表过薄。对有序列表和列表项应用合适的宽度来处理这个问题。
考虑清除 DOM 中有序列表下方的所有元素，以确保它们不会滑入列表的左侧或右侧。
【讨论】：
<ol>
<li>
<div>
<p style="float:left">Follow these instructions</p>
<img style="float:right" src="[***]" alt="" />
</div>
</li>
</ol>
试试这个，它对我有帮助。
【讨论】：