jQuery移动按钮对齐问题

Question

我想我的手在jQuery Mobile上，我觉得它有点令人困惑，因为它是一个标记驱动的框架。

我创建了一个测试页，其中我只是试图将一个按钮对齐到右侧，但我无法做到这一点。我试过float: right但它不工作。虽然margin-left正在通过提供特定百分比来工作，但在调整页面大小时不起作用。

这是我的Fiddle code。任何帮助都会很棒。

<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

以前的答案是正确的，但你应该使用CSS样式代替（阿玲= “” 已过时）

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

Answer 3

使用ui-btn-right。它更简单，更简洁，并且（我认为）jquery做事情的方式。

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

Answer 4

如果您要多个按钮可以遇到的问题...

尝试：

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