8

jQuery Mobileを試してみましたが、マークアップ駆動型のフレームワークであるため、少し混乱します。

1つのボタンを右に揃えようとしているテストページを作成しましたが、それができません。試しfloat: rightましたが、機能しません。margin-left特定のパーセンテージを指定して機能していますが、ページのサイズを変更すると同じことが機能しません。

これが私のフィドルコードです。どんな助けでも素晴らしいでしょう。

<div data-role="page">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
            data-role="none">Test</h1>
    </div>

    <div id="contentLogin" align="center" name="contentConfirmation" data-role="content">

        <p style="font-size: 0.85em; color: #000000">
            <b>Welcome to my page</b>
        </p>
        <br>
        <div class="ui-grid-b responsive">

            <div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">

                <div data-role="fieldcontain">
                    <label for="url" class="alignleft">Username:*</label>
                    <input id="userId1" class="required" name="uid_r" placeholder="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="url" class="alignleft">Password:*</label>
                    <input id="Password1" class="required" name="pwd_r" value="" type="password">
                </div>
                <button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>

            </div>
            <div class="ui-block-b">BLOCK A ADS</div>
            <div class="ui-block-c" style="margin-top: 0px;">
                BLOCK C
            </div>

        </div>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed">
    </div>
</div>
4

4 に答える 4

13

ボタンをdiv内に配置し、divを右揃えにしてみませんか？ボタンを含む親div内のすべてが右揃えになります。

<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>

フィドルをチェックしてくださいhttp://jsfiddle.net/mayooresan/96s59/2/

于 2013-03-27T09:30:21.927 に答える
6

を使用しui-btn-rightます。それはより簡単で、冗長性が少なく、（私は）jqueryの方法で物事を行うことができます。

<a href="#" class="ui-btn-right ui-btn-inline">Login</a>
于 2014-08-29T17:54:34.213 に答える
4

前の答えは正しいですが、代わりにCSSスタイルを使用する必要があります（aling = ""は非推奨です）

<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
于 2013-10-15T11:15:11.920 に答える
4

複数のボタンが必要な場合は、問題が発生する可能性があります...

試す： 

<div style="float:right">
    <button data-inline="true">Login</button>
</div>

複数のボタン（左右両方を揃える）が必要な場合。

使用する場合：

<div style="text-align: right;">
    <button data-inline="true">Login</button>
</div>

divは既存のボタンの下に新しいブロックを開始するため、左側に他のアイコンを表示することはできません。

クラスui-btn-icon-left|rightではボタンを左|右に揃えることができますが、2つのボタンを使用するとボタンui-btn-icon-rightが重なることがわかりました。

以下のテンプレートは、フッターの2つの左揃えのボタンと2つの右揃えのボタンで機能しました。 

<a href="#home" class="ui-btn">Home</a>
<a href="#intro" class="ui-btn">Intro</a>
<div style="float:right">
    <a href="#review" class="ui-btn">Review</a>
    <a href="#exit" class="ui-btn">Exit</a>
</div>

ここに画像の説明を入力してください

于 2016-02-03T17:33:58.977 に答える