jQuery移动按钮对齐问题

Question

我正在尝试jQuery Mobile,我发现它有点令人困惑,因为它是一个标记驱动的框架.

我创建了一个测试页面,我只是尝试将一个按钮对齐,但我无法做到这一点.我试过了,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>

Answer 1

为什么不将按钮放在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/

Answer 2

使用ui-btn-right.它更容易,更简洁,而且(我认为)是jquery做事的方式.

<a href="#" class="ui-btn-right ui-btn-inline">Login</a>