小编典典

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

css

我有一个(XHTML Strict)页面,在该页面上我将图像与普通文本段落一起浮动。一切顺利,除非使用列表而不是段落。列表的项目符号与浮动图像重叠。

更改列表或列表项的边距无济于事。页边距是从页面的左侧开始计算的,但浮动框将列表项推到其 内部
的右侧li。因此,仅当我将其设置得比图像宽时,边距才有用。

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

设置li { list-style-position: inside }的确会使项目符号与内容一起移动,但是也会使换行的内容开始与项目符号对齐,而不是与上方的行对齐。

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


阅读 359

收藏
2020-05-16

共1个答案

小编典典

我找到了解决此问题的方法。施加ul { overflow: hidden; }ul该盒子本身是由浮子推开保证,而不是框的内容。

只有IE6才需要ul { zoom: 1; }在我们的条件注释中确保ul布局。

2020-05-16