在列表元素内浮动元素的技巧

我试图使用有序列表（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元素。

这甚至可能吗？想要使用这种方式，但如果不是，会生成一些其他解决方案。

来源

2010-06-23 tigre

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

对于段落和图像被包含list元素所约束，您需要浮动列表元素和父列表元素。

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

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

来源

2010-06-23 19:36:50

感谢提醒，乔恩。我将float：left应用于ol和li元素，然后将宽度：100％应用于li元素，以确保它适合我包含的div。干杯! – tigre 2010-06-23 22:30:16

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

试试这个，它帮了我。

来源

2012-07-06 07:11:40 san

你也可以考虑使用overflow: hiddentechnique;将overflow: hidden添加到您的li将使其能够扩展以包含浮动内容。

jsFiddle here。

来源

2012-07-06 07:19:42

很酷的解决方案，但如果你在列表中有一个下拉列表，那么它也会被部分隐藏...... – 2017-06-16 02:46:37

在列表元素内浮动元素的技巧

回答

相关问题