确定元素是否包裹在浮动元素周围
我有一个图像，它是 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>
I have an image, which is float: left;
a ul tag is wrapped around this image. It is on the right-hand side of the image.
Custom bullets contained in the ul are partially overlapping the floating image.
When the ul is displaced to the right a little, this is fixed.
But, to do this, I need to determine, whether the ul is wrapped around this image.
How to do it ?
Update 1:
This code demonstrates the problem. It's true for standard bullets too, not only custom.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用 CSS 选择器控制 UL 内图像的特定行为：
这在 JavaScript 中也是可能的，但这应该可以使用纯 CSS 来解决。
You can control specific behaviour for images inside ULs using CSS selectors:
It's possible in JavaScript, too, but this should be possible to sort out using pure CSS.