代码之家 › 专栏 › 技术社区 › tigre

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

css-float list css

7

tigre · 技术社区 · 15 年前

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

我尝试将内容包装在列表项(li)中,如下所示:

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

它只是将图像发送到li元素之外。我尝试在LI中的两个浮动元素之后添加一个clear div,我尝试在LI元素本身中添加一个clear hack。我还尝试将p和img元素嵌套在浮动的div中。

这是可能的吗?希望使用这种方式,但如果不使用,将生成其他解决方案。

3 回复 | 直到 13 年前

1

4

Jon Cram 15 年前

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

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

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

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

2

8

Matt Gibson 13 年前

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

jsFiddle here .

3

1

Michael Schmidt Kishore 13 年前

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

试试这个,它帮助了我。