jQuery mobile button alignment issue

Question

I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.

I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.

Here is my Fiddle code. Any help would be great.

<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

Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.

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

Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/

Answer 2

Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.

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

Answer 3

The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)

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

Answer 4

You can run into problems if you want multiple buttons...

Try:

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

if you want to have multiple buttons (both left and right aligned).

If you use:

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

the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.

Class ui-btn-icon-left|right lets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-right will overlap them.

The template below worked for me for two left aligned buttons and two right in a footer:

<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>