html - 列表项，两个超链接 CSS 设计

Question

我需要一个 <li>元素内部有两个按钮，如下所示:

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

按钮的布局类似于以下内容:

 ____________
|_________|__|

背景将跨越整个按钮，<a>左侧的标签将填充文本，右侧的标签将使用 alpha 透明按钮覆盖 <li> 的背景。元素。这是我得到的 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;
}

我正在对所有其他列表项做类似的事情，只是它们的右侧没有“添加”按钮。我遇到的问题是引入了一个两个像素的间隙来插入另一个 <li>元素下来。我不确定我做错了什么。我能做到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不应该在那里，出于某种原因这样做会导致产生额外的间隙。 耸肩。

Answer 1

我认为您的 li 问题是转移注意力的问题。通过添加以下内容，我能够使列表布局美观紧凑:

height: 14px; /* Add to '#left ul#main-menu li.li-add a.left' */

您从未为左侧标签指定高度，它的自动高度高于为 .right 标签指定的 25px。您正在 li 标签上设置高度，但它们是内联元素，而不是您制作 a 标签时的 block 元素。只有 block 元素可以指定高度。希望这会有所帮助。

祝你好运!