为什么我的列表项项目符号与浮动元素重叠

2024-01-30

我有一个(XHTML Strict)页面,其中我将图像与常规文本段落一起浮动。一切都很顺利,除非使用列表而不是段落。列表的项目符号与浮动图像重叠。

更改列表或列表项的边距没有帮助。边距是从页面左侧开始计算的,但浮动会将列表项推到右侧inside the li本身。因此,只有当我使其比图像更宽时,边距才会有帮助。

将列表浮动在图像旁边也可以,但我不知道列表何时位于浮动旁边。我不想仅仅为了解决这个问题而浮动内容中的每个列表。此外,当图像浮动时,向左浮动会弄乱布局向右而不是列表的左侧。

Setting li { list-style-position: inside }确实会随着内容移动项目符号,但它也会导致换行开始与项目符号对齐,而不是与上面的行对齐。

问题显然是由于子弹在盒子外渲染而引起的,浮动将盒子的内容推到右侧(而不是盒子本身)。这就是 IE 和 FF 处理这种情况的方式,据我所知,根据规范,没有错误。问题是,我该如何预防呢?


我已经找到了解决这个问题的方法。应用ul { overflow: hidden; } to the ul确保盒子本身被浮子推到一边,而不是盒子的内容。

只有 IE6 需要ul { zoom: 1; }在我们的有条件评论中,以确保ul有布局。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么我的列表项项目符号与浮动元素重叠 的相关文章