Question

我正在使用背景图片添加自定义项目符号以列出我的内容中的项目。在内容中还有左侧浮动的图像。当图像和列表项彼此相邻时，子弹会出现在图像不存在的情况下，但文本环绕图像。

这是一个例子： http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra

有没有办法让子弹出现在应该的位置（即文本旁边）？

Answer 1

在Firebug / Firefox中（你必须检查其他浏览器）我解决了你的问题，添加了一个：

li {
    overflow:hidden;
}

不知道原因究竟是什么，但这条神奇的线条解决了漂浮物周围的许多问题： - ）

编辑解决方案，如果您可以稍微更改html

如果您对html有任何控制权，您可以使用段落标记而不是列表项：

p.list_item {
    background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
    padding-left: 11px;
}

然而，这会改变列表项的语义......

Answer 2

这是一个古老的话题......但我想我会添加一些我通常会这样做以防万一有人在这里通过搜索绊倒......

如果我左边有一个图像，并且计划在其右侧有图形项目符号无序列表（UL），我将图像语句放在DIV标记内，并向该DIV添加一个float：left样式。 / p>

然后，我将我的UL标签包装在DIV中，并将该DIV设为浮动：左侧样式，使其显示在第一个DIV的右侧。

如果我想要在我的UL下恢复其他文本，那么我给第二个DIV的宽度等于页面/列的总宽度减去图形宽度 - 基本上，考虑到所有空间在图像的右侧。这将强制继续文本直接在UL DIV下流动，如果UL比图形短，则文本将流向图形的右侧，然后按预期在图形下方。

如果UL延伸低于图形，则文本将在图像下方开始，如预期的那样。

如果您希望文本只是从左侧图形开始，无论UL的高度如何，那么您只需应用clear：两种样式到随后的

，即

一般来说，只要UL不比左图高得多，这种方法就可以工作，因为很明显在这种情况下，列表本身不会在图像下包裹，留下空白 - 所以要制作一个长列表看起来正确可能需要一些有目的的图像大小调整，或在第一个DIV中堆叠几个图像，或者您可能拥有的任何其他解决方案。

如果你真的想搞砸，我曾经有过几次使用上述两种DIV方法，但是将第一个DIV设置为position：relative，并将第二个DIV放入包含UL INSIDE的位置首先，有一个位置：绝对，当然还有顶部：?? px和右：?? px，当然要设置我的UL绝对位于图像右侧。使用这种方法需要正确的布局，显然......

好的，我只能说，希望这是有道理的＆amp;祝你好运！

Answer 3

尝试将列表项包装在<p>标记中，然后为该标记留下左边距。

Answer 4

为什么在html中将div.fig width设置为0？

<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>

删除它，列表将浮动图像。

Answer 5

嗯，从风格的角度来看，这不是最好的解决方案，但是正确地浮动图像可以避免这个问题。感谢大家的建议

Answer 6

如果您希望整个ul不浮动图像，请尝试将overflow：hidden添加到ul

CSS浮动导致背景图像显示不正确

6 个答案: