Problem z wyrównaniem jQuery dla telefonu komórkowego

Question

Próbuję użyć mojej strony w jQuery Mobile i uważam, że jest to nieco mylące, ponieważ jest to framework oparty na marżach.

Stworzyłem stronę testową, w której próbuję wyrównać jeden przycisk w prawo, ale nie jestem w stanie tego zrobić. Próbowałem float: right, ale to nie działa. Chociaż margin-left działa, podając określony procent, to samo nie działa podczas zmiany rozmiaru strony.

Oto mój Fiddle code. Każda pomoc byłaby świetna.

<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

Dlaczego nie umieścić przycisku wewnątrz elementu div i nie wyrównać w prawo elementu div? wszystko wewnątrz elementu nadrzędnego, w tym przycisk, zostanie wyrównane do prawej.

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

Zapoznaj się z skrzypce http://jsfiddle.net/mayooresan/96s59/2/

Answer 2

poprzednią odpowiedź jest poprawna, ale należy używać stylów CSS zamiast (Aling = "" jest przestarzałe)

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

Answer 3

Korzystając ui-btn-right. Jest to łatwiejsze, mniej gadatliwe i (jak sądzę) sposób jQuery do robienia rzeczy.

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

Answer 4

Można napotkasz problemy, jeśli chcesz kilka przycisków ...

Spróbuj:

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

jeśli chcesz mieć kilka przycisków (zarówno z lewej i prawej wyrównane).

Jeśli używasz:

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

div rozpocznie nowy blok poniżej wszelkich istniejących przycisków, więc nie można mieć inne ikony na lewym skrzydle.

klasa ui-btn-icon-left|right pozwala wyrównać przyciski w lewo | w prawo, ale odkryłem, że nałożenie dwóch przycisków za pomocą przycisków ui-btn-icon-right spowoduje ich nałożenie.

Poniższy szablon pracował dla mnie przez dwa przyciski wyrównany do lewej i dwa w prawo w stopce:

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