jQuery Mobile标题按钮左右浮动

acc*_*man 3 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>  
Run Code Online (Sandbox Code Playgroud)

左侧设计/右侧实际编码设计

小智 16

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

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


Lik*_*d_T 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>
Run Code Online (Sandbox Code Playgroud)

基本上我把我的按钮包裹在一个div中,这让我可以使用ui-btn-left和right浮动按钮并正确对齐它们似乎不会导致任何冲突到目前为止.

这是css

.footerContainer{
    width:97%;
    height:38px;
    border:none;
    position:relative;
    }
Run Code Online (Sandbox Code Playgroud)

我将宽度设置为97%,因为100%将采用宽度加上填充和position:relative以便包含浮点数.