Question

我有一个水平导航，我正在尝试将图像用于li类，但是，当我尝试.nav li .home{background:img url;}图像没有显示时，我该如何解决这个问题？

CSS

.nav {
    position: absolute;
    height: 20px;
    width: 100%;
    background-image: url(images/nav.png);
    background-repeat: repeat;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 3;
}
.nav li {
    padding-left: 10px;
    list-style-type: none;
    margin-top: auto;
    margin-bottom: auto;
}
.nav li a {
    margin-top: 5px;
    margin-bottom: 5px;
}
.nav li.home {
    background: url(images/home.png);
}

HTML：

<ul class="nav">
<li>
<a herf="#" class="home">home</a>
</li>
</ul>

Answer 1

我正在尝试将图像用于li类

.nav li .home不针对li。它将针对li中具有类名“home”的元素。没有HTML源代码，我无法给出明确的解决方案。但是，如果我猜，你的HTML是这样的：

<ul>
 <li class="home">
  <a href="index.html">home</a>
 </li>
 <li class="about">
  <a href="about.html">about</a>
 </li>
</ul>

在这种情况下，您可以将CSS更改为：

.nav li.home

通过删除空格，li是目标。

Answer 2

您的<li>必须有值 - 否则不会出现。您可以使用 或真实文本，例如“home”并设置text-indent：-999;把它移到屏幕外。

Answer 3

你的选择器 .nav li.home 将选择“home”类列表项在您的情况下，列表项没有类.home，它是列表项中具有类的链接。 li.home可以使用以下几行html：

<ul class="nav">
<li class='home'>
<a herf="#"></a>
</li>
</ul>

但是当您使用li和.home之间的空格将此行编辑为.nav li .home时，它将选择列表项“内部”类的元素。在这种情况下，背景将添加到<a herf="#" class="home"></a>，因此图像将是一个链接。这两种可能。

您还必须为背景提供宽度和高度的元素以适合背景图像。如果元素是0x0，则无法看到背景。

你还检查了网址吗？如果你直接在浏览器中找到图像的路径，它会给你一个404错误吗？

CSS li背景问题

3 个答案: