0

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

<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，因为它的浏览器支持很弱。

4

2 回答 2

0

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

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

您还可以减小按钮顶部和底部的 line-height 以补偿较大的中间部分：

span.button-bottom {
    line-height: 0.8;
}
于 2013-10-24T19:31:50.130 回答
0

嗯......经过几个小时的努力，我设法解决了它。我不得不使用不同的图像，再添加一个跨度并使用一些相对定位。 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 有问题（代码中有标记），但我相信我会很快解决的。

于 2013-10-25T14:56:52.667 回答