垂直對齊jQuery Mobile中的按鈕

Question

我正在研究JQuery Mobile應用程序。這個應用在「內容」部分有一個按鈕，我想在「內容」部分的底部對齊。我的html是這樣的：

<div id="myPage" data-role="page"> 
    <div data-role="header" data-position="fixed"> 
     <a href="/page1" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home">Back</a> 
     <h1>My App</h1> 
     <a href="/page3" class="ui-btn-right" data-role="button" rel="external" data-transition="slide">Next</a> 
    </div> 

    <div data-role="content"> 
     <ul data-role="listview"> 
      <li data-role="list-divider"> 
       Step 2 of 3 
      </li>    
     </ul><br /><br /> 

     <!-- Main content Goes Here --> 
     <br /> 

     <!-- I want the following button to be vertically aligned to the bottom so that it sits on top of the footer content --> 
     <input type="button" value="View Table" onclick="return viewTable();" data-mini="true" /> 

    </div> 

    <div data-role="footer" class="ui-bar" data-position="fixed"> 
     <!-- My Footer Content --> 
    </div> 
</div> 

如何垂直對齊該按鈕，使其剛好在頁腳之上？如果我把它放在頁腳本身，由於使用的顏色，它看起來不正確。

Answer 1

從我頭頂上做到這一點的一種方法是將你的按鈕包裝在一個ID與一個div，並添加一些絕對位置底部的CSS。例如：

HTML

<div id="viewTableBtn"> 
    <input type="button" value="View Table" onclick="return viewTable();" data-mini="true" /> 
</div> 

CSS

#viewTableBtn{ 
    position:absolute; 
    bottom:15px; 
    width:94%; 
}​