jQuery移動按鈕對齊問題

我想我的手在jQuery Mobile上，我覺得它有點令人困惑，因爲它是一個標記驅動的框架。jQuery移動按鈕對齊問題

我創建了一個測試頁，其中我只是試圖將一個按鈕對齊到右側，但我無法做到這一點。我試過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>

來源

2013-03-27 karthick

爲什麼不把你的按鈕放在一個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-27 09:30:21

感謝you..Yeah，做了trick.I不知道爲什麼我沒有想到這一點。 – karthick 2013-03-27 09:37:24

如果答案幫助您考慮將其標記爲正確答案。 – 2013-03-27 09:40:36

以前的答案是正確的，但你應該使用CSS樣式代替（阿玲= 「」已過時）

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

來源

2013-10-15 11:15:11 NiloVelez

使用ui-btn-right。它更簡單，更簡潔，並且（我認爲）jquery做事情的方式。

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

來源

2014-08-29 17:54:34 NuclearPeon

如果您要多個按鈕可以遇到的問題...

嘗試：

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

來源

2016-02-03 17:33:58 pelms

問題就像2年前一樣問了^ _ ^ – karthick 2016-02-03 19:39:44

jQuery移動按鈕對齊問題

回答

相關問題