jQuery Mobile header button float left and right

问题

i'm trying to get the header to have two sets of button on the left and right, but i'm having trouble getting everything to line up and float left/right properly. Any idea on an easy way to accomplish this.

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

回答1:

Use class="ui-btn-left on the back button and class="ui-btn-right" on the controlgroup.

Maybe you also need to put a header between both elements, at least empty <h1></h1>

回答2:

you probably figured out a solution by now but I did this in my footer and it worked out for me:

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

Essentially I wrapped my buttons in a div and that allowed me to use ui-btn-left and right to float the buttons and align them properly doesn't seem to cause any conflicts so far.

Here's the css

.footerContainer{
    width:97%;
    height:38px;
    border:none;
    position:relative;
    }

I set the width to 97% because 100% will take the width plus padding and position:relative so that the float is contained.

来源：https://stackoverflow.com/questions/10722139/jquery-mobile-header-button-float-left-and-right

标签

css

jquery-mobile