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

Question

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

我的左上角有一个浮动图片margin-right。内容由带有项目符号的段落和列表组成。我希望我的列表有一个padding-left以提高可见度，我的子弹出现在＆＃34; list-style-position: outside＆＃34; （文字必须对齐）。

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

以下是您需要注释的带注释的屏幕截图：

这种行为发生在FF和Chrome上。使用IE浏览器，情况更糟，因为子弹出现在浮动图像的最左侧......

编辑：css属性＆＃34; ul{overflow: hidden;}＆＃34;不是一种选择，因为我想避免这种情况：

抱歉，我无法向您展示一段代码，因为它是一个Drupal网站，节点内容由wysiwyg模块生成，由网站管理员和编辑编写。我无法访问生成的结构。内容不固定，列表可能出现在文本的任何地方。

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

Answer 1

列表上有左边的初始填充（因此有足够的空间显示子弹）所以除非你给ul一个大于这个初始值的填充，否则你的列表实际上会向左移动而不是向右移动

Have a look at this example

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

Answer 2

我认为你必须摆脱这个：

list-style-position: outside

这会将你的子弹点放在填充之外。在框模型中，边框外的任何内容在浮动期间都会崩溃。

Answer 3

Padding不会应用于浮动div右侧的列表，因为它留在浮动div之后。 它不会从div之后计数，它在浮动div之后仍然从左边开始计数ul。 这是因为div＆＃34;浮动＆＃34;带有文字。

为了更好地理解它，请在我的示例in fiddle

中播放ul li填充

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

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