1

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

4

2 回答 2

2

简单的。只需添加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;
}

这是工作演示

于 2013-08-05T12:01:04.363 回答
0

您是否尝试过使用 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

于 2013-08-05T11:45:07.140 回答