奇怪的CSS LI问题

Question

我有一个奇怪的李问题，我无法搞清楚。我在这个页面的内容上有一个li的图像集，但它不是对文本而是在图像后面！对如何解决这个问题感到困惑。任何帮助将不胜感激。

http://staging.liquor.com/wind-at-your-back/

Answer 1

添加

overflow: hidden;

到#single_content ul。 （overflow: auto也可以）。如果它也需要在IE6中工作，请确保列表has layout（例如，通过添加zoom: 1）。

浮动元素后面的块框内的线被浮动元素推开。但是块框本身不会移动，使背景图像保持在其左边缘，由浮动元素覆盖。

您可以通过设置新的块格式化上下文来阻止块框与浮动重叠。一种方法是设置overflow属性。这会强制浮动旁边的整个列表，而不是仅将其文本推到一边。

有关详细信息，请参阅CSS2 specification section about floats。

Answer 2

列表的背景图片位于鸡尾酒图片的后面。你可以使列表像这样漂浮在右边

#single_content ul {
  float:right;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  width:280px;
}

或者li给你的图片的宽度+边距margin-left，如此

#single_content ul li {
  background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
  margin:0 0 0 310px;
  padding:0 0 3px 15px;
}

使重新出现在浮动图像后面。

Answer 3

立即解决方案是将以下规则添加到#single_content ul

margin: 0 0 0 295px;

我不喜欢这样，因为它相当绝对，尽管你的网站看起来很好并且不应该受到伤害。我会寻找更优雅的东西，如果我找到它，请在这里发布。

编辑1：不是更好，但您可以将以下规则添加到li元素中：

background-position: 295px 0;

Answer 4

要从图像外部显示背景图像，您可以为样式添加边距

添加

margin:0 0 0 ~300px;

到

#single_content ul li