Add button to right side of header

Question

I would like to add an icon button to the right side of my header in jQuery mobile. I'm having trouble with the automatic left positioning.

Here's my header:

<div data-role="header" data-position="inline">
     <h1>Resultaten</h1>
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext">home</a>
</div>

Answer 1

Use class="ui-btn-right" or add a class ui-btn-right in <a>

<div data-role="header" data-position="inline">
     <h1>Resultaten</h1>
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right">home</a>
</div>

Answer 2

If you have multiple buttons that you want to align to the right using the class="ui-btn-right" in <a> will place all the buttons on top of each other. Instead you can just wrap a div around it and float to the right.

<div data-role="header" data-position="inline">
    <h1>Resultaten</h1>
    <div style="float:right;">
        <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right">btn 1</a>
        <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right">btn 2</a>
    </div>
</div>