html - 为什么我的列表项元素符号与 float 元素重叠

标签 html css

我有一个 (XHTML Strict) 页面,在该页面中,我将图像与常规文本段落一起 float 。一切顺利,除非使用列表而不是段落。列表的元素符号与 float 图像重叠。

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

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

设置 li { list-style-position: inside } 确实会随着内容移动元素符号,但它也会导致换行开始与元素符号对齐,而不是与行对齐以上。

这个问题显然是由在盒子外面渲染的子弹造成的, float 将盒子的内容推到了右边(而不是盒子本身)。这就是 IE 和 FF 处理这种情况的方式,据我所知,根据规范并没有错。问题是,我该如何预防呢?

最佳答案

我已经找到了解决这个问题的方法。应用 ul { 溢出:隐藏; }ul 确保盒子本身被 float 推到一边,而不是盒子的内容。

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

关于html - 为什么我的列表项元素符号与 float 元素重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/710158/

相关文章:

javascript - 获取文本框中的单词

html - 隐藏在php后面的下拉菜单项包括

css - 如何使用 css 创建带有水平子菜单的嵌套垂直菜单

javascript - 将图像放入容器中,即使 src 已更改

javascript - 如何自动选择文本输入?

html - 跟进帖子: "...why are there no “justify-items” and “justify-self” properties?“

javascript - 我的站点如何将特定类分配给 div?

html - 有没有办法只使用 CSS 来使按钮具有与同级按钮相同的宽度?

css - 使 @font-face 在 IE9 中更高效

html - 背景尺寸封面仅适用于内联样式的移动设备