列表项,两个超链接CSS设计

我需要一个单人间 <li> 元素,其中有两个按钮,如下所示:

<li>
    <a href="#" class="left">The title</a>
    <a href="#" class="right"></a>
</li>

按钮的布局如下:

 ____________
|_________|__|

背景将横跨整个按钮, <a> 左边的标签将用文本填充,右边的标签用透明的alpha按钮覆盖 <理工大学; 元素。这是我的CSS。

#left ul#main-menu li.li-add a {
    display:block;
    padding:4px 6px 6px 6px;
    text-decoration:none;
    color:#fff;
    font-size:12px;
    margin:0;
}

#left ul#main-menu li.li-add {
  height:25px;
  margin:0;
  padding:0;
  background: url('button_back.gif') no-repeat;
}

#left ul#main-menu li.li-add a.left {
  width:106px;
  float:left;
  padding:5px 6px 6px 6px;
}

#left ul#main-menu li.li-add a.left:hover {
  background: url('button_back_hover.gif') no-repeat;
}

#left ul#main-menu li.li-add a.right {
  float:left;
  text-align:center;
  font-size:16px;
  padding:4px 0 0 0;
  margin:0;
  height:21px;
  width:27px;
  font-weight:bold;
}

#left ul#main-menu li.li-add a.right:hover {
  background: url('button_back_hover.gif') no-repeat center right;
}

我对所有其他列表项都做了类似的事情,只是它们右边没有“添加”按钮。我遇到的问题是,一个两像素的间隙被引入,而另一个 <理工大学; 元素向下。我不知道我到底做错了什么。我能做到 margin-bottom:-2px 但所做的只是让一个2像素的区域在下面的元素中是不可点击的。

编辑

实际上是浮筒。

#left ul#main-menu li.li-add a.right {
  float:left;
  text-align:center;
  font-size:16px;
  padding:4px 0 0 0;
  margin:0;
  height:21px;
  width:27px;
  font-weight:bold;
}

float:left 不应该在那里,因为某些原因,这样做会造成一个额外的差距。 耸肩 .