Question

I’m working on a jQuery mobile app and was wondering if anyone could help with button alignment within a list divider. Here is a link to a jsFiddle I created showing the button next to the text. I was wondering if it was possible to align the button to the right. I’ve tried adding a div around the button with a style of style="text-align: right;", but that pushes the button down like this, which I don’t want.

Is there anyway to keep the text and the button on the same line, with the button aligned to the right? Any help is appreciated.

Answer 1

you could do it by using a 2 column layout grid, see jsfiddle

code:

<div data-role="page" id="p1">
    <div  data-role="header"><h1>Header Page 1</h1></div>

    <div  data-role="content">
         <ul data-role="listview" data-inset="true" data-divider-theme="a">
           <li data-role="list-divider">
             <div class="ui-bar ui-grid-a">
               <div class="ui-block-a" style="margin-top:10px;">List Header</div>
               <div class="ui-block-b" style="text-align:right;"><a href="#" data-role="button" data-mini="true" data-icon="plus" data-inline="true" data-theme="a">Add</a></div>
             </div>
           </li>
           <li>List item 1</li>
      </ul>
    </div>

    <div  data-role="footer"><h4>Footer</h4></div>
</div>

screenhsot: