使可点击的链接区域更大，但使用图像链接

Question

我之前找到了这个页面，它详细说明了如何使用它：

http://v3.thewatchmakerproject.com/journal/154/simple-css-how-to-make-clickable-areas-bigger

然而，使用图像时，这种方法似乎分崩离析。我正在使用图像翻转技术，它只是移动图像位置...如果我像在教程中那样增加标签上的填充大小，它会显示图像的哪个部分被隐藏...不是只有这一点，但是当我需要居中时，可点击区域会向左对齐。这样做，除非你在图像上移动，否则左边没有额外的空间来点击链接，而右边则有一堆房间。

我知道可以这样做，我只是不确定我做错了什么。如何改变教程？这就是我所拥有的：

ul {
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0;
}

ul li {
  float: left;
  margin: 0px 10px;
}

ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 5px;
}

ul li a:hover {
  text-decoration: underline;
}

#workbutton {
  float: left;
  display: block;
  width: 29px;
  height: 9px;
  margin-left: 30px;
  background: url(../images/buttons/work_button.png) no-repeat 0 0;
}

#workbutton:hover {
  background-position: 0 -9px;
}

#workbutton span {
  display: none;
}

#processbutton {
  float: left;
  display: block;
  width: 47px;
  height: 9px;
  background: url(../images/buttons/process_button.png) no-repeat 0 0;
}

#processbutton:hover {
  background-position: 0 -9px;
}

#processbutton span {
  display: none;
}

#clientsbutton {
  float: left;
  display: block;
  width: 38px;
  height: 9px;
  background: url(../images/buttons/clients_button.png) no-repeat 0 0;
}

#clientsbutton:hover {
  background-position: 0 -9px;
}

#clientsbutton span {
  display: none;
}

#contactbutton {
  float: left;
  display: block;
  width: 44px;
  height: 9px;
  background: url(../images/buttons/contact_button.png) no-repeat 0 0;
}

#contactbutton:hover {
  background-position: 0 -9px;
}

#contactbutton span {
  display: none;
}

#homebutton {
  float: left;
  display: block;
  width: 33px;
  height: 9px;
  background: url(../images/buttons/home_button.png) no-repeat 0 0;
}

#homebutton:hover {
  background-position: 0 -9px;
}

#homebutton span {
  display: none;
}

<div>
  <ul>
    <li><a id="workbutton" href="#" title="Work"><span>Work</span></a></li>
    <li><a id="processbutton" href="#" title="Process"><span>Process</span></a></li>
    <li><a id="clientsbutton" href="#" title="Clients"><span>Clients</span></a></li>
    <li><a id="contactbutton" href="#" title="Contact"><span>Contact</span></a></li>
    <li><a id="homebutton" href="#" title="Home"><span>Home</span></a></li>
  </ul>
</div>