ul 填充不适用于浮动 img 旁边

Posted 2023-03-06

【中文标题】ul 填充不适用于浮动 img 旁边

【英文标题】：ul padding not applying next to a floating img

【发布时间】：2014-05-28 12:27:42

【问题描述】：

我有一个非常基本的 CSS 问题。

我的左上角有一个带有margin-right 的浮动图像。内容由带有项目符号的段落和列表组成。我希望我的列表具有padding-left 以提高可见性，并且我的项目符号出现在“list-style-position: outside”中（文本必须对齐）。

我的问题是，当我的浮动图像旁边显示一个列表时，ul padding 不适用。

这是一个带注释的屏幕截图，供您理解：

这种行为发生在 FF 和 Chrome 上。使用 IE 会更糟，因为项目符号出现在浮动图像的最左侧...

编辑：css 属性“uloverflow: hidden;”不是一个选项，因为我想避免这种情况：

很抱歉我不能给你看一段代码，因为它是一个Drupal网站，节点的内容是由所见即所得模块生成的，由站长和编辑编写。我无法访问生成的结构。内容不固定，列表可能出现在文本中的任何地方。

这个小提琴很好地代表了我的情况：http://jsfiddle.net/34Cuf/

【问题讨论】：

你试过清除你的花车吗？

@DD0UG 包含浮动 img 的 Div 清晰：两者

发布您的完整代码，并创建 jsfiddle 或给我们链接到您的页面，以便我们处理此问题。

@MiljanPuzović 恐怕做不到 因为这个项目太大了，sass 文件很多，而且 html 是通过 Drupal 模板显示的……我写下了与元素相关的 css 属性导致问题。这是一个在线出现问题的链接：infos-entreprises.be/fr/couts-de-creation-13

只是清除图像后的浮动。用 .Image-left class

在 div 之后添加这个

【参考方案1】：

我认为你必须摆脱这个：

list-style-position: outside

这会将您的项目符号点放在填充之外。在盒子模型中，边界盒子之外的任何东西都会在浮动期间折叠。

【讨论】：

恐怕即使删除了这个属性，或者修改为“list-style-position:inside”，它也不会应用填充。我之前尝试过，现在再次为您重新检查。 awesomescreenshot.com/0222ngoc15

【参考方案2】：

列表具有初始左侧填充（因此有足够的空间来显示项目符号），因此除非您为ul 提供大于此初始值的填充，否则您的列表实际上会向左移动而不是向右移动。

Have a look at this example

要使您的 ul 在浮动元素旁边正常运行，您只需要将其浮动：Example

【讨论】：

恐怕我不关注你了。如果我删除浮动图像的右边距，我就看不到项目符号了（因为 list-style-position: outside）。看看我在这里的意思：awesomescreenshot.com/0ca2ngs5d3 另外，将我所有的 ul 包装在一个 div 中不是一种选择，因为该内容是由所见即所得的生成的。

它们消失在你的浮动元素后面 - 看到这个：jsfiddle.net/LyY8B/4 所以你只需要添加一个大于 ul 的自然左填充（大约 35px）的边距 - 看看我更新的回答

这正是我所做的。我只希望我的列表比我的段落“缩进更多”，甚至在浮动 img 旁边。

抱歉，我没有注意到您的编辑。让我的列表浮动不起作用，因为它们在内容中无处不在，在段落之间。如果我这样做，文本将不再有意义。截图：awesomescreenshot.com/0762ngxz62

啊，如果它是内容可编辑的，那么你真的可以做的事情并不多，这不会影响该区域的所有 uls。这些图像看起来足够小，以至于您的介绍段落通常会占据大部分。我只会强制 ul 从一个清晰的左侧开始新行，这样它的填充才能正常工作

【参考方案3】：

填充不适用于浮动 div 右侧的列表，因为它停留在浮动 div 后面。 不从 div 后算起，浮动 div 后仍从左边算起为ul。 发生这种情况是因为 div 带有文本“浮动”。

为了更好地理解它，在我的例子中播放ul li padding in fiddle

看到在浮动 div 中放了一点边距，你会看到 ul 的内容从浮动 div 后面的左边距延伸。

您必须为浮动 div 应用更大的右边距。

【讨论】：

我已经考虑过那个解决方案。但是我不想缩进的段落呢？

对其他段落应用负填充，对ul应用正填充，直到找到它们之间的正确点。

浮动img旁边没有的段落怎么办？他们也会得到负填充！不是吗？