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