UL重叠，浮动：左图像

Question

  

可能重复：
  Why do my list item bullets overlap floating elements

我一直遇到浮动图片旁边的ul问题

以下是我一直在使用的代码

<img src="abc.jpg" width="300" height="375" style="float:left;" /> Hello world isn't this amazing
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <!--list shortened for readability-->
</ul>
<p>Extra sample text here</p>

结果

如果已更改为

<ul style="overflow:auto;">

该列表会继续显示图像，而不是我想要的内容

同时尝试以下操作会产生错误的结果

<ul style="list-style-position: inside;">

我想要的Photoshop

Answer 1

在使用list-style-position：inside时，也删除了padding-left。填充通常由浏览器定义。作为替代方案，您可以将list-style-position：置于外部并增加margin-left，直到子弹不重叠为止。

Answer 2

你可以把ul放在div里面，让div在图像

之后左移

Answer 3

这是CSS工作原理的绝佳参考：CSS2.1#floats

<ul>是一个块元素，因此你可以使用内联样式在没有任何额外div的情况下在图像旁边制作浮点数：

<ul style="float:left;">

Answer 4

最简单的方法是在图片中添加margin-right: 20px;。或者，如果您只需要移动列表并保留周围的文字，请将margin-left: 40px;添加到<ul>。

Answer 5

另一个令人毛骨悚然但工作的解决方案是将每个li放在一个单独的ul中，并设置溢出：隐藏在uls上，如下所示：http://jsfiddle.net/xA9n8/