Question

我对使用精灵图像显示列表中每个项目的不同图像的代码感到不满意。代码可以在这里看到：

在可以单击列宽度的任何位置之前，它会选择列表项，因为我使用了display：block。

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

width: 0px;

这意味着我必须单击实际列表文本才能选择它。删除宽度：类.nav li中的0px实现了我想要的效果。任何人都可以通过一些干净有效的代码向我展示如何做到这一点。

Answer 1

您应该将图像放在链接上，而不是列表中。使用display:block和padding-left:提供足够的空间。通常，将所有非位置样式放在A - 标记上，而不是LI。

除此之外，你正在以正确的方式做到这一点。

Answer 2

我会利用CSS伪元素的优势，比如::before。你可以这样做：

http://jsfiddle.net/franciscop/JBuE6/53/

HTML：

<nav>
  <ul>
    <li>
      <a href="url" id="user">User</a>
    </li>
    ...

CSS：

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

OLD ANSWER [替代方案]：

我会将左侧填充和精灵更改为<a>，以便您也可以单击它们。

.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;
  }

http://jsfiddle.net/franciscop/JBuE6/50/

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

2 个答案: