2012-05-23 174 views
3

我試圖讓標題在左右兩側有兩組按鈕,但我無法正常排列所有內容並將其左右移動。任何想法在一個簡單的方法來完成這一點。jQuery Mobile標題按鈕左右浮動

 <div data-theme="a" data-role="header" data-position="fixed"> 
<!-- back button -->      
     <a style=" margin:5px 0 10px 0;" data-role="button" 
    data-transition="slide" data-theme="b" href="#track_dash" 
    data-icon="arrow-l" data-iconpos="left"> 
      Back 
     </a> 

<!-- chart switch -->      
      <div data-role="fieldcontain" style="float: right;"> 
       <form action="#" method="POST"> 
        <fieldset data-role="controlgroup" data-type="horizontal" > 
         <input name="radiobuttons5" id="radio7" value="radio1" type="radio" /> 
         <label for="radio7"> 
          List 
         </label> 
         <input name="radiobuttons5" id="radio8" value="radio8" type="radio" /> 
         <label for="radio8"> 
          Chart 
         </label> 
        </fieldset> 
       </form> 
      </div> 

     </div> 

left side design/right side actual coded design

+0

究竟是什麼問題? – davids

回答

16

上的controlgroup後退按鈕和class="ui-btn-right"使用class="ui-btn-left

也許你也需要把兩個元素之間的頭,至少空<h1></h1>

7

你可能想出了一個解決方案通過,但現在我在頁腳做到這一點,它的工作對我來說:

<div data-role="footer" class="ui-bar" data-position="fixed" data-id="myFooter"> 
    <div class="footerContainer">  
     <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-left">Cancel</a> 
     <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-right">Next</a> 
    </div> 
</div> 

本質上,我把我的按鈕包裹在一個div中,並允許我使用ui-btn-left和right來漂浮按鈕並正確對齊按鈕似乎不會導致任何衝突。

這裏的CSS

.footerContainer{ 
    width:97%; 
    height:38px; 
    border:none; 
    position:relative; 
    } 

我的寬度設定爲97%,因爲100%將採取寬度加上填充和位置:使浮子被包含相對的。