css背景图像正在被切断

我有一个无序的列表，当试图将其放置在文本旁边时，背景图像被切断

我使用jquery将该类添加到锚定标记以显示图像，其工作正常，唯一的问题是图像被切断。我一直在玩css，但似乎不知道如何正确显示图像…似乎

以某种方式将图像隐藏在其后面…我可以将图像放在

前面以使其显示…还是我遗漏了其他内容

有人能帮我吗？谢谢

以下是HTML：

<ul id="nav>
    <li>
       <a class="folder_closed">Item 1</a>
       <div style="display:none">Content for item 1</div>
    </li>
</ul>

---

您需要在A标记中添加

display:block

和一些尺寸标注（可能还有一些使其看起来更美观的填充），以确保元素足够大，可以包含背景图像

你最好把所有的样式都转移到你的A标签上。不必费心设计LI标记的样式（除非您需要浮动）

。文件夹\u打开{
垂直对齐：顶部；看起来可能是你的背景位置……如果我理解正确，最大化图像正在消失，对吗

另外，我发现，在指定背景图像时，一个好的做法是显式地将背景颜色设置为透明

.folder_closed {
  background: transparent url(../images/maximize.png) no-repeat scroll -5px 1px;
}

这听起来像是一个线条高度问题——只是为了实验，试着设置LI“线条高度：40px；”，看看你的图像是否完全显示

在这种情况下，我要做的一件事是使用一些绝对定位。首先要设置它，您必须将UL和LIs相对定位：

<style type="text/css">
  ul, li {
    position: relative;
  }
</style>
<ul>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>


李先生{
位置：相对位置；
}






然后在LI的左侧添加一些填充：

<style type="text/css">
  li {
    padding-left: 30px;
  }
</style>


李{
左侧填充：30px；
}

在本例中，您使用的是带有某些类样式的锚。将锚分为两部分，如下所示：

<li>
  <a class="folder_icon folder_closed"></a>
  <a class="folder_title">... your title ...</a>
  ... your other content ...
</li>


…你的头衔。。。
…您的其他内容。。。


然后将其中一个As转换为阻止显示：

<style type="text/css">
  li .folder_icon {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 16px;
    height: 16px;
  }

  li .folder_closed {
    background-image: url("../images/minimize.png");
    background-repeat: no-repeat;
    background-position: -5px 1px; 
  }
</style>


li.folder_图标{
位置：绝对位置；
左：0px；
顶部：0px；
显示：块；
宽度：16px；
高度：16px；
}
李。文件夹已关闭{
背景图像：url（“../images/minimize.png”）；
背景重复：无重复；
背景位置：-5px1px；
}

怎么样？
添加“线条高度：？px；”到容器样式表
你能提供一个链接到一个实时站点，这样我们就可以看到发生了什么吗？我希望…它在本地主机上，我没有一个实时的开发框。尝试实时演示。迪奥德斯，这太棒了。谢谢，它显示了我想要的图标。我感谢你的帮助。不过有一件奇怪的事。这是一个可扩展的菜单，（我更新了原来的帖子）以显示一个位于文件夹正下方的。有什么想法吗？如果我移除显示块，图标就会被正确按下……但图标被切断的原始问题又回来了。如果“事实”应该在文件夹旁边？没有，文件夹应该在“事实”旁边……换句话说，“事实”正在向下推到我想要的位置，但文件夹仍位于顶部…进一步调试帮助我发现文件夹位于
的最顶部，而事实位于
的最底部…通过对
进行着色，我发现了这一点…但为什么它会这样做？我以为块元素会被向下推…这是只有在FF3、ie7中才能这样做吗？如果你把背景放在A标签上（用适当的左填充），它应该始终与文本是同一行，因为它们是相同的元素。我不确定你在这里做错了什么。太好了！如果我有钱，我会给你一百万美元！我的初始测试显示图标按我需要的方式工作，div按我需要向下推…我还需要运行一些测试，但我必须离开现在出城去…我明天会运行它们并报告！谢谢！在进一步测试之后，我也遇到了同样的问题。我刚刚注意到这棵
树被包含在…是否可能是被包含在表中导致了这些奇怪的东西？它们的行为方式没有意义？嗯，这很奇怪。根据我的经验，你使用的是严格的doctype？还是过渡性的？这让整个世界变得与众不同。你可能需要对图标做的另一件事是确保所有包含的元素都需要相对定位。这也适用于TD、TR和表格。我通常会打开Firebug并开始实时编辑样式并试着用它把事情安排妥当。p.s.对不起，我直到现在才读到这篇文章。我不是每天登录s.O.：）
<li>
  <a class="folder_icon folder_closed"></a>
  <a class="folder_title">... your title ...</a>
  ... your other content ...
</li>

<style type="text/css">
  li .folder_icon {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 16px;
    height: 16px;
  }

  li .folder_closed {
    background-image: url("../images/minimize.png");
    background-repeat: no-repeat;
    background-position: -5px 1px; 
  }
</style>