html - 灵活的垂直菜单

Question

我正在研究 this vertical menu .我需要它具有灵 active ，以便可以显示更长的文本(如中间项所示)。我想保留元素的“填充”，但我也想增加多行元素的行之间的空间(如果我增加行高，到边缘的距离会变大)。如何在不增加“填充”的情况下实现这一目标？我使用的图像必须有透明背景，所以我不能使用组合颜色图像(后面有渐变)。

<div id="nav-list">
<ul>
<li><a href="#"><span class="button-middle">Button</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">Another button</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">The longest button in the world, even longer</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">Button</span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-middle">Btn</span><span class="button-bottom"></span></a></li>
</ul>
</div>

CSS:

* {
border: 0;
margin: 0;
padding: 0;
}

#nav-list {
width: 195px;
}

#nav-list ul {
list-style: none;
}

#nav-list ul li {
display: block;
margin: 5px 2px 0 5px;
font-size: 13px;
}

#nav-list ul li a {
display: block;
background: url('http://i41.tinypic.com/20h4hvp.png') top left no-repeat;
padding-top: 10px;
line-height: 10px;
color: #000000;
text-decoration: none;
}

#nav-list ul li a .button-middle {
width: 183px;
background: #b6b6b6;
padding-left: 5px;
display: block;
}

#nav-list ul li a .button-bottom {
width: 188px;
height: 10px;
background: url('http://i39.tinypic.com/2mrd343.png') top left no-repeat;
display: block;
}

注意:我不能使用 CSS3，因为它的浏览器支持很弱。

Answer 1

我认为你能做的最好的就是添加类似的东西:

span.button-middle {
    line-height: 1.2;
}

您还可以降低按钮顶部和底部的行高以补偿较大的中间部分:

span.button-bottom {
    line-height: 0.8;
}