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>

- karthick

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/，它与it技术有关。

- Jay Mayu

---

谢谢。是的，这就解决了问题。我不知道为什么我没想到。 - karthick

Answer 2

使 用 ui-btn-right。它更简单，更简洁，并且（我认为）是 jQuery 的做法。

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

- NuclearPeon

Answer 3

您在想要多个按钮时可能会遇到问题...

尝试：

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

如果您想要多个按钮（左右都对齐）。

如果您使用以下代码：

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

标签将在现有按钮下面开始一个新的块，因此左边不能有其他图标。

类 ui-btn-icon-left|right 可以让按钮向左/右对齐，但我发现使用两个带有ui-btn-icon-right 的按钮会重叠。

以下模板适用于我在页脚中放置两个左对齐按钮和两个右对齐按钮：

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

- pelms

---

这个问题大约2年前被问过 ^_^ - karthick

Answer 4

之前的回答是正确的，但你应该使用CSS样式来代替（aling=""已经过时了）。

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

- NiloVelez