Question

我有一张图片，float: left;

ul标记围绕此图片。它位于图像的右侧。

ul中包含的自定义项目符号与浮动图像部分重叠。

当ul向右移动一点时，这是固定的。

但是，要做到这一点，我需要确定ul是否包裹在此图像中。

怎么做？

更新1：

此代码演示了此问题。标准子弹也是如此，不仅仅是定制的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Bullets overlapping example</title>
</head>
<style type="text/css" media="screen">
 body {
  display: block;
  width: 400pt;
  margin: auto;
  border: solid thin gray;
 }
 img {
  float: left;
  width: 250pt;
 }
</style>
<body>
 <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg" />
 <p>Bullets in a list below must be fixed someway, to prevent overlapping of float image</p>
 <ul>
  <li>Bullet of this list item overlaps left-hand-side image.</li>
  <li>This list item too</li>
  <li>And this ...</li>
 </ul>
 <div style="height: 6em;"></div>
 <p>This list should not be fixed, because it <b>does't wraps</b> the image</p>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
 </ul>
</body>
</html>

Answer 1

您可以使用CSS选择器控制UL内部图像的特定行为：

ul img { ........ } /* This rule will apply only to images inside ULs */

在JavaScript中也可以，但是应该可以使用纯CSS进行整理。

确定元素是否包裹在float元素周围

1 个答案: