CSS菜单未正确对齐

我在jquery mobile中设计了一个移动应用程序。我试图设计一个响应式菜单，但问题是当我的菜单内容超过1行其行为怪异。这里是我想要的和我得到的东西的截图。CSS菜单未正确对齐

enter image description here

这里是我的样式表

<ul> 
    <li><a href="about.html"><img src="images/icon1.png" border="0" alt="" title="">About</a></li> 
    <li><a href="blog.html"><img src="images/icon2.png" border="0" alt="" title="">My blog &amp; Portfolio</a></li> 
    <li><a href="gallery.html"><img src="images/icon3.png" border="0" alt="" title="">Photos</a></li> 
</ul>

menu ul { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    display: inline; 
    line-height: 25px; 
    } 
    .menu ul li { 
    list-style: none; 
    display: inline-block; 
    width: 85px; 
    height: 125px; 
    margin: 0px 6px 5px 6px; 
    background: url(images/icon_bg.png) no-repeat center top; 
    } 
    .menu ul li a { 
    font-size: 14px; 
    font-weight: bold; 
    color: #302f2f; 
    text-decoration: none; 
    text-shadow: 1px 1px #dcdcdc; 
    } 
    .menu ul li a img { 
    padding: 0px; 
    width: 85px; 
    height: 85px; 
    }

这里我们的jsfiddle http://jsfiddle.net/Xr8kL/

来源

2013-08-05 jquery404

提供一个的jsfiddle或活链接到这个问题。 – Nitesh

@NathanLee用jsFiddle更新http://jsfiddle.net/Xr8kL/ – jquery404

简单。只需添加一个vertical-align:top;到.menu ul li

例如，

.menu ul li { 
    background: url("images/icon_bg.png") no-repeat scroll center top transparent; 
    display: inline-block; 
    height: 125px; 
    list-style: none outside none; 
    margin: 0 6px 5px; 
    vertical-align: top; 
    width: 85px; 
}

这里是WORKING DEMO

来源

2013-08-05 12:01:04 Nitesh

o男孩！你真棒！谢谢Nathan。你救了我的一天 – jquery404

不客气:) - @ jquery404 – Nitesh