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

0

独自の CSS でレイアウトを定義しようとする代わりに、jquery モバイル グリッド レイアウトを使用しようとしましたか? これが私が意味することです：

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 に答える