jQuery Mobile标题按钮左右浮动

时间:2012-05-23 14:32:08

标签: css 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

2 个答案:

答案 0 :(得分:16)

使用后退按钮上的class="ui-btn-left和控制组上的class="ui-btn-right"

也许您还需要在两个元素之间添加标题,至少为空<h1></h1>

答案 1 :(得分: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%将采用宽度加上填充和position:relative以便包含浮点数。