http://biochrom.fivesite.co.uk/catalogue4.asp
在上面的页面上,有一个图像漂浮在左边。它的右侧是一个列表,标题为“功能”。列表项有一个背景图像,但是,它没有出现。清单 2 显示了背景图像的外观。
有谁知道我怎样才能使子弹可见?
http://biochrom.fivesite.co.uk/catalogue4.asp
在上面的页面上,有一个图像漂浮在左边。它的右侧是一个列表,标题为“功能”。列表项有一个背景图像,但是,它没有出现。清单 2 显示了背景图像的外观。
有谁知道我怎样才能使子弹可见?
我知道这是一年前的帖子,但其他人可能想知道...
如果您使用的是内容管理系统并且有些页面有图像而有些页面不希望您的列表项在内容中为 200 像素,会发生什么情况?
您可以将此 CSS 添加到您的 UL/OL 元素中:
overflow:hidden;
我希望这会有所帮助。
您的图像有一个 float:left 属性。因此,列表项呈现在图像“后面”。
margin-left:200px;
上 UL 元素将解决您的问题。
或者,您可以在 UL 元素上应用 float:left。这将使其浮动到图像的右侧,但会使以下内容出现在同一行。您可以通过清除 UL-element或在 UL-element 之后添加元素来防止这种情况...
clear:both
...适用于它。
有关此行为的更多信息,请访问 http://www.positioniseverything.net/easyclearing.html。
这个线程确实很旧,但总是相关的......
另一种替代解决方案:
display: inline-block;
把这个放在 UL 上。它强制整个 ul 出现在浮动之后。这样您就可以拥有一个带有或不带有图像的页面,并且它始终会正确显示(在 FF4、IE7 和 8、Chrome 11 上进行了检查)。
或者,您可以使用 list-style-image 属性而不是 background-image。前几天我遇到了这个问题:浮动在其“邻居”上展示的文本换行行为仅适用于“内容”,而不适用于背景图像(例如)。