Question

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

<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;
}

Answer 2

嗯......经过几个小时的奋斗，我设法解决了这个问题。我不得不使用不同的图像，添加一个跨度并使用一些相对定位。 http://jsfiddle.net/uNCsp/

<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>

CSS：

#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;
}

IE7中存在问题（在代码中标明），但我相信我会尽快解决。

灵活的垂直菜单

2 个答案: