0

こんにちは、jQueryモバイルサイトを開発しています。

赤いボタンの表示に関する私の問題は、ヘッダーの「ホーム」ボタンと「製品」ボタンの幅が、それらの内部のテキストによって決定されているようです。これは、一方のボタンがもう一方のボタンよりも薄く見えることを意味します。ボタンを同じ一定の幅に設定する方法はありますか？ヘッダーで一貫したボタン幅を実現したいと思います。

おそらく、ボタンに間違ったHTML属性を使用していますか？

<div data-role="header" data-theme="c" class="mainNav">
                <a href="index.php" id="headerLogo" data-role="none"><span class="logo"></span></a>
                    <div class="ui-btn-right menuBtn">
                        <a data-role="button" href="index.php" data-icon="home" data-iconpos="top">Home</a>
                        <a data-role="button" href="products.php" data-icon="settings" data-iconpos="top">Products</a>
                    </div>
</div>

私のモバイルウェブサイトはここにあります： http ：//www.test-bed.co.uk/mobile/index.php

jQueryモバイルボタンのドキュメントは次のとおりです。

http://jquerymobile.com/demos/1.2.0-pre/docs/buttons/index.html

4

2 に答える 2

1

JQuery Mobile で使用している CSS テーマを編集して、すべてのページで一貫したボタン サイズを取得することをお勧めします。それが苦手な場合は、それらを同じクラスにして、提供された CSS ページで幅を設定してください。

class mobi-button {
   display: inline-block;
   width: 32px;
   height: 46px;
}

これについては以前に説明しましたが、次回は質問する前に必ず検索してください。時間を節約できるかもしれません！

于 2012-08-30T21:45:33.463 に答える
0

リンクの幅を設定するだけです：

<a data-role="button" href="index.php" data-icon="home" data-iconpos="top" style="width:75px;">Home</a>
<a data-role="button" href="products.php" data-icon="settings" data-iconpos="top" style="width:75px;">Products</a>

または、CSS スタイルシートでこれを行うこともできます。

.ui-page .ui-header .menuBtn a {
    width : 75px;
}

ここにデモがあります：http://jsfiddle.net/5mvF9/

于 2012-08-30T22:38:19.720 に答える