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

2023-12-12

我有一个(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(使用前将#替换为@)

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

  • 仅 IE9_有时_会忽略

    我们正在开发一个大量使用 这是典型的 TYPO3 网站 该网站是在子目录中开发的 稍后将被重新定位到顶级目录 因此我们无法轻易删除 我们的客户告诉我们 有时当她浏览新页面时 她得到的页面内容没有应用布局 我们对此进行了调试 仅在 IE9 中
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • jQuery - 如何从 div > p 获取文本

    如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • 如何在 EXE 中直接嵌入 DirectShow Push Source 过滤器?

    我有一个 Delphi 6 程序 它通过套接字从外部程序接收音频 现在 我想将该音频提供给我创建的 DirectShow 过滤器图表 该图表将该音频路由到 PC 上的不同输出过滤器 我正在使用 DSPACK 进行 DirectShow 过滤
  • 如何在 Beanshell 中使用或转义 java 8 Lambda 表达式

    我正在开发一个产品 在 Tomcat 中运行的 Sailpoint IdentityIQ 它使用 Beanshell env 进行产品自定义挂钩 我想编写一些代码来解析大型 csv 文件 并希望利用 Java 8 Streams 但我面临
  • 如何在 WPF 中的模板化 TabItem 上获取关闭按钮?

    我有一个TabControl哪里的TabItems are DataTemplat编辑 该模板似乎工作正常 因为我想在TabItem显示正确 我不确定如何让 x 出现在TabItem所以我可以关闭每个选项卡 因为它们是通过模板动态生成的 作
  • Singleton程序中Static语句的使用及流程

    我知道关于单例模式有很多问题 但在这里我想了解有关输出的信息 它也可能涵盖 静态 在 Java 中的工作原理 public class Singleton private static Singleton currentSingleton
  • Spark - 如何组合/合并 Seq[Row] 中 Dataframe 中的元素以生成 Row

    首先我想说我被迫使用 Spark 1 6 我正在生成一个DataFrame来自这样的 JSON 文件 id 1201 name satish age 25 id 1202 name krishna age 28 id 1203 name a
  • 在 Excel 中查找并替换为指定字体名称的文本

    我正在使用 Microsoft Excel 12 0 对象库 我的目标是找到具有指定字体名称的文本并替换为新文本 Microsoft Office Interop Excel Application xlApp new Microsoft
  • 列表的所有可能的子列表

    我需要编写一个函数来生成一个列表 其中包含列表中所有可能的子列表的列表 所以类型必须是 partitions a gt a 它应该给出 分区 1 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3
  • 使用 JavaMail 的表

    我正在使用 JavaMail 发送电子邮件 我想将消息数据放入将嵌入电子邮件中的表中 接收消息的人将看到包含已填写数据的表格 我该怎么做呢 我猜你指的是 HTML 表 StringBuilder sb new StringBuilder s
  • 将未知数量的参数传递给 JavaScript 函数

    有没有办法传递未知数量的参数 例如 var print names function names foreach name in names console log name something like this print names
  • 是否可以使用 tqdm 进行 pandas 合并操作? [复制]

    这个问题在这里已经有答案了 我可以找到 tqdm 进度条用于 group by 和其他 pandas 操作的示例 但找不到有关合并或连接的任何内容 是否可以在 pandas 上使用 tqdm 进行合并 tqdm 支持 pandas 及其中的
  • 对 svg 过滤器的特征检测支持

    我需要检测浏览器是否支持 svg 过滤器 具体来说是 feGaussianBlur 我将如何对此进行测试 Safari 不支持过滤器 会默默地忽略过滤器 您可能还可以检查接口上可用的枚举 例如 var supportsfilter type
  • 设计 DAL 和 BLL - 相关表的单个/多个数据存储库

    在设计新的多层应用程序时 我很难为我的应用程序做出决定DAL and BLL层设计 假设我将员工信息分布在与主表具有 1 1 和 1 Many 关系的多个表中 下面列出了一些 员工 主表 员工 联系方式 详细信息 员工 教育 员工技能 员工
  • 如何绕过 www.instagram.com 的 429 错误?

    我今天向您求助是因为我对硒有疑问 我的目标是制作一个完全自动化的机器人 它可以创建一个包含解析详细信息 邮件 通行证 出生日期 的帐户 到目前为止 我已经几乎创建了该机器人 我只需要访问 Gmail 并获得确认 代码 我的问题就在这里 因为
  • pandas.DataFrame 和 numpy.array 中的 np.isreal 行为不同

    我有一个array像下面这样 np array hello world a 5 b 6 c 8 usa india d 9 e 10 f 11 and a pandas DataFrame像下面这样 df pd DataFrame A he
  • Java - 正则表达式在代码中查找注释

    一点fun这次用Java 我想编写一个从标准输入读取代码的程序 例如 逐行 例如 some comment class Main blah foo foo foo foo2 foo2 找到其中的所有评论并将其删除 我正在尝试使用正则表达式
  • 如何使用 Perl 列出具有特定名称模式的目录下的文件?

    我有一个目录 var spool在其中 名为的目录 a b c d e f g h i j k l m n o p q r s t u v x y z 在每个 字母目录 内 有一个名为 user 在这个里面 许多目录称为auser1 aus
  • String.split(".") 没有分割我的长字符串

    我正在执行以下操作 String test this is a example String test2 test split 问题 test2没有物品 但也有很多 in the test String 知道问题是什么吗 注意公共字符串 s
  • MvvmCross 无法在 iPhone 上为 EditingDidBegin 创建目标绑定

    我有一个绑定到 EditingDidBegin 的应用程序 它在 iPhone 模拟器 iOS 7 上运行良好 但在实际 iPhone 上运行时 我收到以下警告消息 MvxBind 警告 1 29 无法为 EditingDidBegin 创
  • 如何将一个 Jupyter 笔记本导入到另一个笔记本中

    显然有可能import将一个 Jupyter 笔记本插入另一个 链接页面有相当多的代码来完成此操作 我应该将该代码添加到导入笔记本中吗 页面对此并不清楚 它应该是一个通用的解决方案 因此将所有代码添加到导入其他笔记本的所有笔记本中是没有意义
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi