Question

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

我正在使用jquery将类添加到锚标签以显示图像，并且其工作正常，唯一的问题是图像被切断。我一直在玩css，但似乎无法弄清楚如何使图像正确显示...它似乎＆lt; li>隐藏在它背后的图像...我可以将图像放在＆lt; li>让它显示......或者我错过了其他什么？

有人能帮助我吗？感谢。

这是HTML：

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

这是CSS：

ul#nav{
    margin-left:0;
    margin-right:0;
    padding-left:0px;
    text-indent:15px;
}

#nav > li{
    vertical-align: top;
    text-align:left;
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
}

.folder_open{
    position:relative;
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
}
.folder_closed{
    position:relative;
    background-image: url(../images/minimize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px; 
}

Answer 1

这听起来像一个行高问题---只是为了实验尝试设置LI“line-height：40px;”看看你的图像是否完全显示......

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

<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>

在这种情况下，您使用＆lt; A＆gt;锚具有一些类样式。打破＆lt; A＆gt;分为两个：

<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>

怎么样？

Answer 2

你需要在A标签上添加display:block和一些尺寸（可能还有一些填充以使其看起来很漂亮），以确保元素足够大以包含背景图像。

最好将所有样式转移到A标签上。根本不打算为LI标签设置样式（除非你需要浮动）。

.folder_open{
    vertical-align: top; <--- use padding to accomplish this instead
    text-align:left; <-- this too
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
    position:relative;  <--- not needed.
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
    display:block;
    height: ??px;
    width: ??px
}

Answer 3

看起来它可能是你的背景位置...如果我理解得当，最大化图像正在消失，对吗？

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

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

Answer 4

将“ line-height：？px; ”添加到容器样式表

css背景图像被切断

4 个答案: