在JQuery Mobile中垂直对齐按钮 [英] Vertically Align a Button in JQuery Mobile

问题描述

我正在使用JQuery Mobile应用程式。此应用在内容部分有一个按钮，我想在内容部分的底部对齐。我的html看起来像这样：

I'm working on a JQuery Mobile app. This app has a button in the "content" portion that I want to align at the bottom of the "content" section. My html looks like this:

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

如何垂直对齐该按钮，使其刚好位于页脚的上方？如果我把它放在页脚本身，它看起来不正确，因为使用的颜色。

How do I vertically align that button so that it is just above the footer? If I put it in the footer itself it doesn't look right because of the colors used.

推荐答案

关闭我的头顶部是包装你的按钮在一个div与id和添加一些css绝对位置到底部。示例：

One way to do this off the top of my head is to wrap your button in a div with an id and add some css that absolutely positions to bottom. Example:

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%;
}​

这篇关于在JQuery Mobile中垂直对齐按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！