tig*_*gre 7 css list css-float
我正在尝试使用有序列表(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.我也尝试在浮动的div中嵌套p和img元素.
这甚至可能吗？想使用这种方式,但如果没有,将产生一些其他解决方案.
在没有其他CSS规则的情况下，非浮动容器不会将其内容识别为具有的宽度和高度，从而导致容器折叠至其允许的最小高度。
为了使段落和图像受包含的list元素约束，您将需要同时浮动list元素和父顺序列表。
然后，有序列表和列表元素都将减小到以外观方式封装内容所需的最小宽度。这可能会导致列表过薄。将适当的宽度应用于排序的列表和列表项以处理此问题。
考虑清除DOM中有序列表正下方的所有元素，以确保它们不会滑入列表的左侧或右侧。
| 归档时间： |
|
| 查看次数： |
8051 次 |
| 最近记录： |