jQuery Mobile页眉按钮左右浮动

Question

我想让头部有两组按钮分别在左右两侧，但是我很难让它们对齐并正确地左/右浮动。有什么简单的方法可以实现这个目标吗？

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

- acctman

Answer 1

在返回按钮上使用class="ui-btn-left"，在控制组上使用class="ui-btn-right"。

也许你还需要在这两个元素之间放置一个标题，至少是空的<h1></h1>。

- Joanes

Answer 2

您可能已经找到解决方案，但我在我的页脚中尝试了这种方法，它对我很有效：

<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％会占用宽度加填充和position:relative的位置，以便浮动内容被包含在内。

- Thierry Blais