Html 灵活的垂直菜单

我正在工作。我需要它是灵活的，所以甚至更长的文本可以显示（如在中间项目中看到）。我想保留项目的“填充”，但我还想增加多行项目的行间距（如果我增加行高，与边缘的距离会变大）。如何在不增加“填充”的情况下实现这一点？我使用的图像必须有透明的背景，所以我不能使用混合色图像（后面有渐变）

---

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

我认为最好的办法是添加如下内容：

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

您还可以减小按钮顶部和底部的线条高度，以补偿较大的中间部分：

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

---

嗯。。。经过几个小时的斗争，我终于解决了这个问题。我必须使用不同的图像，增加一个跨度，并使用一些相对定位。

---

IE7中有一个问题（代码中有标记），但我相信我会很快解决。

这就是您想要实现的目标吗？由于“浏览器支持不足”，您认为CSS3的哪一部分不使用？@ajc否。我需要上边缘和文本之间以及下边缘和文本之间的空间稍微小一点。@Paulie_D仍然有人使用IE7、IE8等浏览器。。。我想到了使用圆边。是的……但你认为什么样的CSS3选项可能会有帮助，但你选择不使用？更改按钮底部的线条高度没有效果。设置按钮中间的行高与设置整个链接的行高具有相同的效果。

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

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

<div id="nav-list">
<ul>
<li><a href="#"><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-top"><span class="button-middle">Another button</span></span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-top"><span class="button-middle">Even longer button button button button</span></span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></a></li>
<li><a href="#"><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></a></li>
</ul>
</div>

#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;
color: #000000;
text-decoration: none;
}

#nav-list ul li a .button-top {
background: url('http://i43.tinypic.com/r0urzp.png') top left no-repeat;
display: block;
}

#nav-list ul li a .button-middle {
position: relative;
top: 6px;
background: transparent;
padding: 0 0 0 5px;
display: block; /* IE7 bug */
line-height: 16px;
padding-bottom: 3px;
}

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

#nav-list ul li a:hover .button-top {
background: url('http://i39.tinypic.com/334qfsz.png') top left no-repeat;
}

#nav-list ul li a:hover .button-bottom {
background: url('http://i41.tinypic.com/2ewinti.png') top left no-repeat;
}