Html 更好的实现列表精灵图像的方法

我不喜欢我的代码，它使用精灵图像为列表中的每个项目显示不同的图像。代码可以在这里看到：

在可以沿列的宽度单击任意位置并选择列表项之前，因为我使用了display:block

但是，因为我的精灵需要：

width: 0px;

---

这意味着我必须点击实际的列表文本才能选择它。从类中删除宽度：0px。nav li达到我想要的效果。有谁能用一些简洁高效的代码告诉我怎么做。

你应该把你的图片放在链接上，而不是列表上。使用

display:block

和

padding left:

提供足够的空间。通常，将所有非位置样式放在

A

-标记上，而不是

LI

上

---

除此之外，您的做法是正确的。

我会利用CSS伪元素，比如

：：before

。您可以这样做：

HTML:

旧答案[备选]：

我会将左边的填充和精灵更改为

为什么它需要
宽度：0px？否则它会像这样显示整个精灵？伪元素，轰！这很好，因为我可以单击图像，但宽度为：0px仍然意味着显示块几乎毫无用处，移除它意味着我不能沿着列单击，只能单击文本我不喜欢这样，所以我只是更新了答案。此外，我也不完全理解你的意思，你不能沿着栏点击，更新。
<nav>
  <ul>
    <li>
      <a href="url" id="user">User</a>
    </li>
    ...

nav a {
  color: gray;
  display: block;
  line-height: 26x;
  width: 100%;
  }
nav li a::before {
  display: inline-block;
  content: "";
  background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
  height: 20px;
  width: 20px;
  }
#user::before {
  background-position: -10px -6px;
  }

.nav li {
  }
.nav li a {
  color: gray;
  display: block;
  line-height: 26x;
  padding-left: 30px;
  background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
  height: 20px;
  width: 0px;
  }