靈活的垂直菜單

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的問題（標記代碼），但我相信我會很快解決。