a标签不能垂直底部对齐问题

/**********************css code**********************/
.mainnav ul li{display:block;float:left;}
.mainnav{text-align:right;margin:0 auto;width:900px;padding:0;height:28px; vertical-align:bottom;}
.mainnav ul{height:28px;display:inline-block;display:-moz-inline-box;zoom:1;*display:inline;margin:0;padding:0;}
.mainnavleft li{background:url(../images/topnavbg.gif) no-repeat top; vertical-align:bottom;padding:0;margin:0;width:79px;height:28px;line-height:28px;text-align:center;}
.mainnav a{display:block;height:28px;line-height:28px; vertical-align:bottom;}
/**********************css code**********************/


<div class="mainnav mainnavfont">
<ul class="mainnavleft">
<li><a href="#">首页</a></li>
<li><a href="#">个性相册</a></li>
<li><a href="#">贺卡喜帖</a></li>
<li><a href="#">照片</a></li>
<li><a href="#">个性台历</a></li>
<li><a href="#">帆布画</a></li>
<li><a href="#">水晶相</a></li>
<li><a href="#">个性笔记本</a></li>
</ul>
<ul class="mainnavright">
<li><a href="#">促销</a></li>
<li><a href="#">作品分享</a></li>
</ul>
</div>

我想要li的字底部对齐，但是怎么设置都不行，请高手指点！

5 个解决方案

#1

除了 “个性笔记本” 最后一个字折行以外，其余看不出有什么问题啊？
这个问题把 mainnavleft li 的width值改大点就行了阿。
我的浏览器是ie8,ff3.6

#2

你的能底部对齐么？

#3

能阿，我机器上没有ie6了，估计是ie版本的问题吧

#4

好好优化下css代码，好多属性多余

#5

vertical-align:bottom 只适用于Inline元素

#1