Question

我正在尝试使用CSS让导航栏在图像上定位。然而，我似乎无法让位置正确，持续发生的是图像的前200px保持显示而不是背景定位的下一个200像素，如果这有任何意义的话。这是代码请帮助。

HTML：

<div id="topnav">
  <ul>
    <li id="nav-home"><a href="index.html">Feature Product<span></span></a></li>
    <li id="nav-all"><a href="shop_owners.html">All Products<span></span></a></li>
    <li id="nav-how"><a href="all_products.html">How It Works<span></span></a></li>
  </ul>
</div>

CSS：

#topnav {
  position: relative;
  left: 150px;
  top: 100px;
  margin: 0;
  padding: 0;
  height: 50px;
}

#topnav ul {
  list-style-type: none;
  text-align: center;
  line-height: 50px;
}

#topnav ul li {
  float: left;
}

#topnav ul li a {
  background: url(../nav-bar-2.png);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  position: relative;
}

#nav-home {
  width: 200px;
}

#nav-all {
  width: 200px;
  background-position: -200 0px
}

#nav-how {
  width: 200px;
  background-position: -400px 0px
}

#topnav ul li a span {
  background: url(../nav-bar-2.png) no-repeat scroll bottom left;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 100;
}

#topnav li a span:hover {
  cursor: pointer;
}

#nav-home span {
  background-position: 0px -50px
}

#nav-all span {
  background-position: -200 -50px;
}

#nav-how span {
  background-position: -400 -50px;
}

Answer 1

我认为这是问题所在：

#nav-home{width:200px;}
#nav-all{width:200px; background-position:-200 0px}
#nav-how{width:200px; background-position:-400px 0px}

第二和第三元素的代码分别将背景图像200px和400px移动到左侧。但是，#nav-all和#nav-how没有背景图片，因为您设置的唯一位置是链接以及这些li元素中的链接和跨度。

尝试进行此更改：

#topnav ul li {background:url(../nav-bar-2.png); // a was removed from end of list

现在背景图像位于li元素上，它所拥有的css代码可以向左移动正确的像素数。（我几乎总是在CSS中指定id适用于哪个标记，因为它可以帮助减少此问题，至少在非生产代码中。这意味着您可以使用li#nav-home和li#nav-all来帮助您准确了解id适用于哪个元素）。

此外，请勿在要以像素为单位的长度值上省略px。虽然有些浏览器使用px作为默认长度，但最好不依赖于此行为并且只是明确地将单元声明为px。：d

Answer 2

您没有指定单位。只有-200本身可能意味着很多事情。使用-200px。

Answer 3

您正在设置LI - 代码的背景位置，但是您将背景图片放在其他内容上，span - 代码，而您甚至没有正确-formed SPAN标记。

CSS：后台位置不起作用

3 个答案: