CSS菜单未正确对齐

Question

我在jquery mobile中设计移动应用程序。我尝试设计一个响应式菜单，但问题是当我的菜单内容超过1行时，它表现得很奇怪。这是我想要的和我得到的截图。

这是我的样式表

<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/

Answer 1

简单。只需将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

Answer 2

您是否尝试过使用jquery移动网格布局而不是尝试使用自己的css定义布局？这就是我的意思：

http://jquerymobile.com/demos/1.3.0-beta.1/docs/content/content-grids.html

还有一个指南如何使这些网格响应

http://jquerymobile.com/demos/1.3.0-beta.1/docs/content/content-grids-responsive.html